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 { object_to_edit, set_object_to_edit } = useObjectToEdit(
    (state) => state,
  );

  useEffect(() => {
    if (isOpen === "") {
      formik.setErrors({});
      // formik.resetForm();
    }
  }, [isOpen]);
  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,
    },
    {
      label: t("select.Student_Type.earlyDeparture"),
      value: StudentStatusEnum?.EARLY_DEPARTURE,
    },
  ];

  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 };
    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"
            />
          </>
        )}

        {formik?.values?.status === StudentStatusEnum?.EARLY_DEPARTURE && (
          <>
            <ValidationField
              placeholder="duration"
              label="duration"
              name="departure_time"
              type="Time"
            />
          </>
        )}
      </Col>
      <Col>
        {formik?.values?.status !== StudentStatusEnum?.PRESENCE && (
          <>
            <ValidationField
              placeholder="justification"
              label="justification"
              name="justification"
            />

            <ValidationField
              placeholder="attachment"
              label="attachment"
              type="File"
              name="attachment"
            />
          </>
        )}

        {/* {
          formik?.values?.status === StudentStatusEnum?.LATE_ARRIVAL && 
          <>

<ValidationField
              placeholder="اليوم"
              label=" اليوم * "
              name="date"
              type='Date' 
            />


          </>
        } */}
      </Col>
    </Row>
  );
};

export default Form;
