import { Col, Row } from "reactstrap";
import React, { useEffect } from "react";
import ValidationField from "../../../Components/ValidationField/ValidationField";
import { useGetAllTeacher } from "../../../api/teacher";
import useFormatDataToSelect from "../../../utils/useFormatDataToSelect";
import { useModalState } from "../../../zustand/Modal";
import { useFormikContext } from "formik";
import useSearchQuery from "../../../api/utils/useSearchQuery";

const Form = () => {
  const [searchQuery] = useSearchQuery("techer_name");

  const { data , isLoading } = useGetAllTeacher({
    name: searchQuery,
  });
  const SelectData = useFormatDataToSelect(data?.data);

  const { isOpen } = useModalState((state) => state);
  const formik = useFormikContext();
  useEffect(() => {
    if (isOpen === "") {
      formik.setErrors({});
    }
  }, [isOpen]);

  return (
    <Row className="w-100">
      <Col>
        <ValidationField name="name" label="name" />
        <ValidationField
          type="Search"
          searchBy="techer_name"
          option={SelectData}
          isMulti
          name="teacher_ids"
          label="teacher_name"
          isLoading={isLoading}
        />
      </Col>
      <Col>
        <ValidationField type="File" name="image" label="image" />
      </Col>
    </Row>
  );
};

export default Form;