import { Col, Row } from "reactstrap";
import ValidationField from "../../../../../../Components/ValidationField/ValidationField";
import { useFormikContext } from "formik";
import { useEffect, useState } from "react";
import { useGetAllSession } from "../../../../../../api/session";
import { useGetAllTeacher } from "../../../../../../api/teacher";
import useFormatDataToSelect from "../../../../../../utils/useFormatDataToSelect";
import { useGetAllLesson } from "../../../../../../api/lesson";
import useFormatCustomDataToSelect from "../../../../../../utils/useFormatCustomDataToSelect";
import dayjs from "dayjs";
import useSearchQuery from "../../../../../../api/utils/useSearchQuery";

const Form = () => {
  const { values, setFieldValue } = useFormikContext<any>();

  const { session_id, subject_id, date } = values as any;
  const [searchQuery] = useSearchQuery("name");

  const { data: teacher,isLoading } = useGetAllTeacher({
    name: searchQuery,
  });

  const [date_params, setdate_params] = useState(null);
  const parsedDate = dayjs(date_params, "YYYY/MM/DD");
  const nextDay = parsedDate.add(1, "day");

  const { data: session } = useGetAllSession(
    {
      ordered_by_order: "asc",
      date: nextDay,

    },
    { enabled: !!date_params },
  );

  useEffect(() => {
    setdate_params(date);
  }, [date]);

  const { data: lesson } = useGetAllLesson(
    {
      subject_id: subject_id,
    },
    { enabled: !!subject_id },
  );

  const SelectSessionData = useFormatCustomDataToSelect(session?.data);

  const SelectTeacherData = useFormatDataToSelect(teacher?.data);

  const SelectLessonData = useFormatDataToSelect(lesson?.data);

  // console.log(SelectSessionData,"SelectSessionData");

  const Select_handle_change_session_id = (value: any, option: any) => {
    setFieldValue("subject_id", option?.subject_id);

    setFieldValue("session_id", value);
    setFieldValue("lesson_id", null);
  };

  const Select_handle_Change_date = (value: any) => {
    setFieldValue("date", value);
    setFieldValue("session_id", null);
    setFieldValue("lesson_id", null);
    setFieldValue("subject_id", null);
  };

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

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

        <ValidationField
          placeholder="date"
          label="date"
          onChange={Select_handle_Change_date}
          type="Date"
          name="date"
        />
      </Col>

      <Col>
        <ValidationField
          type="Select"
          isDisabled={!date_params}
          option={SelectSessionData}
          onChange={Select_handle_change_session_id}
          name="session_id"
          label="session_name"
        />

        <ValidationField
          type="Search"
          option={SelectTeacherData}
          name="teacher_id"
          label="teacher_name"
          searchBy="name"
          isLoading={isLoading}
        />

        <ValidationField
          type="Select"
          isDisabled={!session_id || !date_params}
          option={SelectLessonData}
          name="lesson_id"
          label="lesson_name"
        />
      </Col>
    </Row>
  );
};

export default Form;
