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 { useGetAllExamTypes } from "../../../../../../../api/examTypes";
import useFormatDataToSelect from "../../../../../../../utils/useFormatDataToSelect";
import { useGetAllSubject } from "../../../../../../../api/subject";
import { useParams } from "react-router-dom";
import { ParamsEnum } from "../../../../../../../enums/params";
const Form = () => {
  const formik = useFormikContext();
  const { isOpen } = useModalState((state) => state);

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

  const { data: ExamTypes } = useGetAllExamTypes({
    course_id: course_id,
  });
  const ExamTypesSelect = useFormatDataToSelect(ExamTypes?.data);

  const { data: Subject } = useGetAllSubject({
    course_id: course_id,
  });
  const SubjectSelect = useFormatDataToSelect(Subject?.data);

  return (
    <Row className="w-100">
      <Col>
        <ValidationField placeholder="title" label="title" name="title" />

        <ValidationField
          placeholder="exam_type"
          label="exam_type"
          type="Select"
          option={ExamTypesSelect}
          name="exam_type_id"
        />

        <ValidationField
          placeholder="subject_name"
          label="subject_name"
          type="Select"
          option={SubjectSelect}
          name="subject_id"
        />
      </Col>

      <Col>
        <ValidationField
          placeholder="date"
          label="date"
          type="Date"
          name="date"
        />

        <ValidationField
          placeholder="duration"
          label="duration"
          name="duration"
          type="Time"
        />
        <ValidationField
          placeholder="grade_to_pass"
          label="grade_to_pass"
          name="grade_to_pass"
        />
        <ValidationField
          placeholder="max_grade"
          label="max_grade"
          name="max_grade"
        />
      </Col>
    </Row>
  );
};

export default Form;
