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

const Form = () => {
  const formik = useFormikContext();
  const { isOpen } = useModalState((state) => state);

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

  useEffect(() => {
    if (isOpen === "") {
      formik.setErrors({});
    }
    if (isOpen === "isSuccess") {
      formik.setErrors({});
      formik.resetForm();
    }
  }, [isOpen]);
  return (
    <Row className="w-100">
      <Col>
        <ValidationField placeholder="name" label="name" name="name" />
        <ValidationField
          placeholder="price"
          label="price"
          name="price"
          type="NumberFormate"
        />
      </Col>
      <Col>
        <ValidationField
          placeholder="exam_type"
          label="exam_type"
          type="Select"
          isMulti
          option={ExamTypesSelect}
          name="exam_type_ids"
        />
      </Col>
    </Row>
  );
};

export default Form;