// listings
import { h } from 'preact';
import PropTypes from 'prop-types';

const orgOptions = (organizations, organizationId) => {
  const orgs = organizations.map((organization) => {
    if (organizationId === organization.id) {
      return (
        <option value={organization.id} selected>{organization.name}</option>
      )
    }
    return (
      <option value={organization.id}>{organization.name}</option>
    )
  })
  const nullOrgOption = organizationId === null ? <option value="" selected>None</option> : <option value="">None</option>
  orgs.unshift(nullOrgOption) // make first option as "None"
  return orgs
}

const OrgSettings = ({ organizations, organizationId, onToggle }) => (
  <div className="field">
    <label htmlFor="organizationId">Post under an organization:</label>
    <select name="classified_listing[organization_id]" id="listing_organization_id" onBlur={onToggle}>
      {orgOptions(organizations, organizationId)}
    </select>
    <p><em>Posting on behalf of org spends org credits.</em></p>
  </div>
);

OrgSettings.propTypes = {
  onToggle: PropTypes.func.isRequired,
};

export default OrgSettings;
