import React, { useEffect, useState } from 'react';
import OrderActionsDropdown from '../../../Dropdown';
import { useOrderStaticData } from '../../../../store';
import { capitalize } from '../../../../utils';

function ContactTypeDropdown() {
  const [orderStaticData] = useOrderStaticData();
  const [contactTypeOptions, setContactTypeOptions] = useState<any[]>([]);

  const onSelect = () => {};
  const onSearch = () => {};

  useEffect(() => {
    if (orderStaticData) {
      const options = orderStaticData?.order_contact_type?.map(
        (option: any) => ({
          label: capitalize(option.type.replaceAll('_', ' ')),
          value: option.id,
        })
      );
      setContactTypeOptions(options);
    }
  }, [orderStaticData]);

  return (
    <OrderActionsDropdown
      label="Contact Type"
      placeholder="Select Contact Type"
      options={contactTypeOptions}
      onSelect={onSelect}
      onSearch={onSearch}
      disabled={false}
      className="contact-type-dropdown"
    />
  );
}

export default ContactTypeDropdown;
