import { Col, Row } from "reactstrap";
import React, { useEffect } from "react";
import ValidationField from "../../../../../../Components/ValidationField/ValidationField";
import { useFormikContext } from "formik";
import { useModalState } from "../../../../../../zustand/Modal";
import { StudentStatusEnum } from "../../../../../../enums/Items";
import { useObjectToEdit } from "../../../../../../zustand/ObjectToEditState";
import { useTranslation } from "react-i18next";

const Form = () => {
  const formik = useFormikContext<any>();
  const { isOpen } = useModalState((state) => state);
  const { set_object_to_edit, object_to_edit } = useObjectToEdit();

  useEffect(() => {
    if (isOpen === "") {
      formik.setErrors({});
    }
  }, [isOpen, formik]);
  const [t] = useTranslation();
  const Status = [
    {
      label: t("select.Student_Type.absence"),
      value: StudentStatusEnum?.ABSENCE,
    },
    {
      label: t("select.Student_Type.late_arrival"),
      value: StudentStatusEnum?.LATE_ARRIVAL,
    },
    {
      label: t("select.Student_Type.presence"),
      value: StudentStatusEnum?.PRESENCE,
    },
  ];

  const Type = [
    { label: "select.Student_Type.justified", value: "justified" },
    { label: "select.Student_Type.not_justified", value: "not_justified" },
  ];
  const handleSelectChange = (value: any, option: any) => {
    const newData = { ...object_to_edit, status: value };
    // delete newData[object_to_edit?.status];
    formik?.setFieldValue("status", value);

    set_object_to_edit(newData);
  };
  return (
    <Row className="w-100">
      <Col>
        <ValidationField
          placeholder="student_status"
          label="student_status"
          name="status"
          type="Select"
          option={Status}
          onChange={handleSelectChange}
        />
        {formik?.values?.status !== StudentStatusEnum?.PRESENCE && (
          <>
            <ValidationField
              placeholder="type"
              label="type"
              type="Select"
              name="type"
              option={Type}
            />
          </>
        )}
        {formik?.values?.status === StudentStatusEnum?.LATE_ARRIVAL && (
          <>
            <ValidationField
              placeholder="duration"
              label="duration"
              name="duration"
              type="Time"
            />
          </>
        )}
      </Col>
      <Col>
        {formik?.values?.status !== StudentStatusEnum?.PRESENCE &&
          formik?.values?.type === "justified" && (
            <ValidationField
              placeholder="justification"
              label="justification"
              name="justification"
            />
          )}
        {formik?.values?.status !== StudentStatusEnum?.PRESENCE && (
          <>
            <ValidationField
              placeholder="attachment"
              label="attachment"
              type="File"
              name="attachment"
            />
          </>
        )}
      </Col>
    </Row>
  );
};

export default Form;
