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 { useGetAllSubject } from "../../../../../../api/subject";
import { useParams } from "react-router-dom";
import useFormatDataToSelect from "../../../../../../utils/useFormatDataToSelect";
import { useGetAllTeacher } from "../../../../../../api/teacher";

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

  useEffect(() => {
    if (isOpen === "") {
      formik.setErrors({});
      formik.resetForm();
    }
  }, [isOpen]);
  const { edu_class_id } = useParams();
  const { data: subject } = useGetAllSubject({
    edu_class_id: edu_class_id,
  });
  const { data: teacher } = useGetAllTeacher({
    edu_class_id: edu_class_id,
  });

  const subjectSelectData = useFormatDataToSelect(subject?.data);
  const teacherSelectData = useFormatDataToSelect(teacher?.data);

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

        <ValidationField placeholder="content" label="content" name="content" />

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

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

        <ValidationField
          placeholder="teacher_name"
          label="teacher_name"
          type="Select"
          option={teacherSelectData}
          name="teacher_id"
        />

        <ValidationField
          placeholder="attachments"
          label="attachments"
          type="MaltyFile"
          name="attachments"
        />
      </Col>
    </Row>
  );
};

export default Form;
