import React, { useEffect, useState } from 'react'
import { Col, Row } from 'reactstrap'
import ValidationField from '../../../Components/ValidationField/ValidationField'
import { useTranslation } from 'react-i18next';
import { useFormikContext } from 'formik';
import { toast } from 'react-toastify';
import { useGetCategories } from '../../../api/Categories';
import useFormatToSelect from '../../../Hooks/useFormatToSelect';
import { useParams } from 'react-router-dom';

const BasicInfo = ({ setIsValed, IsValed }: any) => {
  const [t] = useTranslation();
  const formikContext = useFormikContext();
  const { values, isValid } = formikContext;
  const { data } = useGetCategories()
  const language = localStorage.getItem("language") ?? "en"
  const {id}=useParams()

  const SelectData = data?.categories?.map((item:any)=>(
    {
      label : item?.name[language],
      value : item?.id
    }
  ))
  useEffect(() => {
    const { name_ar, name_en, name_de, main_photo, category_id } = values as any;

    if (name_ar && name_en && name_de && main_photo && category_id && IsValed === false) {
      toast.success(t("view_information_filed_fill_sucsessfully"));
      setIsValed(true)
    } else {
      // console.log(isValid, "isValid");
    }
  }, [values]);

  
  return (
    <Row xs={1} sm={1} md={1} lg={2} xl={2}>
      <Col>
        <ValidationField name="name_ar" />
        <ValidationField name="name_en" />
      </Col>
      <Col>
      <ValidationField name="name_de" />
        {/* <ValidationField name="main_photo" type='File' /> */}
      {!id && 
      <ValidationField name="category_id" type="Search" label='category' placeholder='category' option={SelectData} searchBy={"name"} />

      }

      </Col>



    </Row>
  )
}

export default BasicInfo