import React from 'react';
import OrderActionsDropdown from '../../Dropdown';
import { useOrderStaticData } from '../../../store';
import { useAtom } from 'jotai';
import { selectedCategoryIdAtom } from '../../store';

function CategoryDropdown() {
  const [staticOrderData] = useOrderStaticData();
  const [, setSelectedCategoryId] = useAtom(selectedCategoryIdAtom);

  const categoryOptions = staticOrderData?.resource_category_type?.map(
    (x: any) => ({
      id: x?.id,
      type: x?.type,
      value: x?.value,
    })
  );

  const onSelect = (selectedValue: any) => {
    const selectedOption = categoryOptions?.find(
      (option: any) => option?.value === selectedValue
    );

    if (selectedOption) {
      setSelectedCategoryId(selectedOption.value);
    }
  };

  return (
    <OrderActionsDropdown
      label="Category"
      required
      placeholder="Select Category"
      options={categoryOptions}
      onSelect={onSelect}
    />
  );
}

export default CategoryDropdown;
