import React from 'react';
import { useFormikContext } from 'formik';
import ValidationField from '../../../Components/ValidationField/ValidationField';
import { useGetSingleAttribute } from '../../../api/attribute';

const Attribute = () => {
  const { values, setFieldValue } = useFormikContext<any>();

  const { data: attributeData } = useGetSingleAttribute({ name: "category_id", id: values?.id });

  const handleAttributeChange = (name: string, value: any) => {
    setFieldValue(`attribute[${name}]`, value);
  };

  return (
    attributeData?.data?.map((item: any) => {
      const options = item?.attribute_value?.map((attr: any) => ({
        label: attr?.value,
        value: attr?.attribute_id
      }));

      return (
        <ValidationField
          key={item?.name}
          name={`attribute[${item?.name}]`}
          label={item?.name}
          placeholder={item?.name}
          type="Select"
          option={options}
          onChange={(value: any) => handleAttributeChange(item?.name, value)}
        />
      );
    })
  );
};

export default Attribute;
