import { Col, Row } from "reactstrap";
import ValidationField from "../../../../../../Components/ValidationField/ValidationField";
import { useFormikContext } from "formik";
import { useModalState } from "../../../../../../zustand/Modal";
import { useEffect } from "react";
import { useGetAllRegistrationRecord } from "../../../../../../api/registrationRecord";
import registration_recordSelect from "../../../../../../utils/registration_recordSelect";
import { useParams } from "react-router-dom";
import { useMarkState } from "../../../../../../zustand/MarkState";
import useSearchQuery from "../../../../../../api/utils/useSearchQuery";

const Form = () => {
  const formik = useFormikContext();
  const { isOpen } = useModalState((state) => state);
  const [searchQuery] = useSearchQuery("student_name");

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

  const { edu_class_id } = useParams();
  const { HeaderData } = useMarkState();

  const { data: registration_record ,isLoading} = useGetAllRegistrationRecord({
    edu_class_id: edu_class_id,
    status: "active",
    whereDoesntHasExam: HeaderData?.id,
    taken_student_count: HeaderData?.total_student_count,
    name: searchQuery,
    
  });

  // console.log(registration_record,"registration_record");

  const recordSelect = registration_recordSelect(registration_record?.data);
  // const ExamSelect = useFormatDataToSelect(Exam?.data);

  return (
    <Row className="w-100">
      <Col>
        <ValidationField
          placeholder="mark"
          label="mark"
          name="value"
          type="NumberFormate"
        />
      </Col>

      <Col>
        <ValidationField
          placeholder="student_name"
          label="student_name"
          type="Search"
          option={recordSelect}
          name="registration_record_id"
          searchBy="student_name"
          isLoading={isLoading}
        />
      </Col>
    </Row>
  );
};

export default Form;
