
import { Col, Row } from 'reactstrap';
import ValidationField from '../../../Components/ValidationField/ValidationField';
import { useGetUsers } from '../../../api/users';
import { useTranslation } from 'react-i18next';
import { useFormikContext } from 'formik';
import { useEffect } from 'react';

function Form() {
  const type = [{ lable: "other", value: "other" }, { lable: "product", value: "product" }, { lable: "order", value: "order" }]

  const { data: user } = useGetUsers()
  const [t]=useTranslation()
  const useFormatToSelect = (Data : any) => {
    const format = (data :any) => {
      if (!data) return [];
      return data.map((item :any) => ({
        value: item?.id,
        label: item?.name,
      }));
    };
  
    return format(Data);
  };
  const SelectData = useFormatToSelect(user?.data)

  // const selectAllOption = [{ label: t("Select All"), value: "*" }];
  const selectAllOption = { label: "Select All", value: "*" };

  const optionsWithSelectAll = [selectAllOption, ...SelectData];
  const { values,setFieldValue} = useFormikContext<any>();

  const hasAsterisk = values?.user_ids.some((item:any) => typeof item === 'string' && item.includes('*'));
  const option = hasAsterisk ? [selectAllOption] : optionsWithSelectAll;

    useEffect(() => {
      if(hasAsterisk){
        setFieldValue("user_ids",["*"])
        
      }
    }, [hasAsterisk])
    
    
    useEffect(() => {
      console.log(values?.user_ids,"user_ids");
      
    }, [values.user_ids])
    

  return (
    <Row xs={1} sm={1} md={1} lg={2} xl={2}>
      <Col>
      <ValidationField name="title_en" />
        <ValidationField name="title_ar" />
        <ValidationField name="title_de" />
    
        {/* <ValidationField name="meta" /> */}
        <ValidationField name="user_ids" label='user' type="Search" option={option} searchBy={"name"}  isMulti />


      </Col>
      <Col>
      <ValidationField name="body_en" type='TextArea' />
        <ValidationField name="body_ar" type='TextArea'/>
        <ValidationField name="body_de" type='TextArea'/>

        {/* <ValidationField name="type" type="Select" option={type} /> */}




      </Col>



    </Row>
  )
}

export default Form




