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';

const BasicInfo = ({ setIsValed, IsValed }: any) => {
  const [t] = useTranslation();
  const formikContext = useFormikContext();
  const { values, isValid } = formikContext;
  const { data } = useGetCategories()
  const SelectData = useFormatToSelect(data?.categories)

  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' /> */}
        <ValidationField name="category_id" type="Search" label='category' placeholder='category' option={SelectData} searchBy={"name"} />

      </Col>



    </Row>
  )
}

export default BasicInfo