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 { useGetAllSubject } from "../../../../../../api/subject";
import { useFormikContext } from "formik";
import { useModalState } from "../../../../../../zustand/Modal";
import { useParams } from "react-router-dom";
import useSearchQuery from "../../../../../../api/utils/useSearchQuery";

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

  const { data: teacher ,isLoading} = useGetAllTeacher({
    name: searchQuery,
  });
  const { course_id } = useParams();
  const { data: subject } = useGetAllSubject({
    course_id: course_id,
  });
  const teacherData = teacher?.data || [];
  const subjectData = subject?.data || [];

  const SelectTeacherData = useFormatDataToSelect(teacherData);
  const SelectSubjectData = useFormatDataToSelect(subjectData);
  const formik = useFormikContext();
  const { isOpen } = useModalState((state) => state);

  useEffect(() => {
    if (isOpen === "") {
      formik.setErrors({});
      formik.resetForm();
    }
  }, [isOpen]);

  return (
    <Row className="w-100">
      <Col>
        <ValidationField
          type="Select"
          option={SelectSubjectData}
          name="subject_id"
          label="subject_name"
        />
        <ValidationField
             type="Search"
             option={SelectTeacherData}
             name="teacher_id"
             label="teacher_name"
             searchBy="teacher_name"
             isLoading={isLoading}
        />
      </Col>
      <Col>
        <ValidationField
          placeholder="session_start"
          label="session_start"
          name="from"
          type="Time"
        />
        <ValidationField
          placeholder="session_end"
          label="session_end"
          name="to"
          type="Time"
        />
      </Col>
    </Row>
  );
};

export default Form;
