import React from "react";
import ValidationField from "../../../../Components/ValidationField/ValidationField";
import { Col, Row } from "reactstrap";
import { useFormikContext } from "formik";
import { useGetAllGrade } from "../../../../api/grade";
import { useValidationValidationParamState } from "../../../../Components/ValidationField/state/ValidationValidationParamState";
import { useGetAllUnit } from "../../../../api/unit";
import { useGetAllSubject } from "../../../../api/subject";
import { useGetAllLesson } from "../../../../api/lesson";
import { useGetAllTag } from "../../../../api/tags";
import DependensesFieldes from "../../../../Components/dependensesFields/DependensesFields";

const FilterForm = () => {
  const { ValidationParamState } = useValidationValidationParamState();
  const {
    GradeName,
    GradeCurrentPage,
    SubjectName,
    SubjectCurrentPage,
    UnitName,
    UnitCurrentPage,
    LessonName,
    LessonCurrentPage,
    TagName,
    TagCurrentPage,
  } = ValidationParamState;
  const formik :any= useFormikContext()
  

  const grade_id = formik.values.grade_id?.id
  const subject_id = formik.values?.subject_id?.id
  const unitId = formik.values?.unitId?.id
  const lessonsIds = formik.values?.lessonsIds?.map((lesson:any) => lesson.id)

  const { data: Grade, isLoading: isLoadingGrade } = useGetAllGrade({
    name: GradeName,
    page: GradeCurrentPage, 
  });
  const GradeOption = Grade?.data ?? [];
  const canChangeGradePage = !!Grade?.links?.next;
  const GradePage = Grade?.meta?.current_page;

  /// subject_id
  const { data: Subject, isLoading: isLoadingSubject } = useGetAllSubject({
    name: SubjectName,
    page: SubjectCurrentPage,
    grade_id
  },
  {
    enabled: !!grade_id
  }
);
  const SubjectOption = Subject?.data ?? [];
  const canChangeSubjectPage = !!Subject?.links?.next;
  const SubjectPage = Subject?.meta?.current_page;

  /// unitId
  const { data: Unit, isLoading: isLoadingUnit } = useGetAllUnit({
    name: UnitName,
    page: UnitCurrentPage,
    grade_id,
    subject_id

  },
{
  enabled: !!grade_id || !!subject_id
}
);
  const UnitOption = Unit?.data ?? [];
  const canChangeUnitPage = !!Unit?.links?.next;
  const UnitPage = Unit?.meta?.current_page;

  /// lessonsIds
  const { data: Lesson, isLoading: isLoadingLesson } = useGetAllLesson({
    name: LessonName,
    page: LessonCurrentPage,
    grade_id,
    unitId

  },
  {
    enabled: !!grade_id || !!unitId
  }
);
  const LessonOption = Lesson?.data ?? [];
  const canChangeLessonPage = !!Lesson?.links?.next;
  const LessonPage = Lesson?.meta?.current_page;  

  /// TagsIds
  const { data: Tag, isLoading: isLoadingTag } = useGetAllTag({
    name: TagName,
    page: TagCurrentPage,
    lessonsIds,
    grade_id,
    subject_id,
    unitId
  });

  const TagOption = Tag?.data ?? [];
  const canChangeTagPage = !!Tag?.links?.next;
  const TagPage = Tag?.meta?.current_page;

  const colRight:any = [
    {
      props:  {
        searchBy: "GradeName",
        name: "grade_id",
        label: "grade",
        type: "Search",
        option: GradeOption,
        isLoading: isLoadingGrade,
        canChangePage: canChangeGradePage,
        PageName: "GradeCurrentPage",
        page: GradePage,
      }
    },
    {
      dependensValue:grade_id,
      props:  {
        searchBy: "SubjectName",
        name: "subject_id",
        label: "subject",
        type: "Search",
        option: SubjectOption,
        isLoading: isLoadingSubject,
        canChangePage: canChangeSubjectPage,
        PageName: "SubjectCurrentPage",
        page: SubjectPage,
      },
    },
      {
      dependensValue:subject_id,
      props:  {
        searchBy: "UnitName",
        name: "unitId",
        label: "unit",
        type: "Search",
        option: UnitOption,
        isLoading: isLoadingUnit,
        canChangePage: canChangeUnitPage,
        PageName: "UnitCurrentPage",
        page: UnitPage,
      },
    },
];
const colLeft :any=[

    {
      dependensValue: unitId,
      props:  {
        searchBy: "LessonName",
        name: "lessonsIds",
        label: "lesson",
        type: "Search",
        option: LessonOption,
        isMulti: true,
        isLoading: isLoadingLesson,
        canChangePage: canChangeLessonPage,
        PageName: "LessonCurrentPage",
        page: LessonPage,
      },
    },
    {
      dependensValue: "none" ,
      props:  {
        searchBy: "TagName",
        name: "tagsIds",
        label: "tag",
        type: "Search",
        option: TagOption,
        isMulti: true,
        isLoading: isLoadingTag,
        canChangePage: canChangeTagPage,
        PageName: "TagCurrentPage",
        page: TagPage,
      },
    }
]
console.log(formik.values)

  return (
    <div>
      <Row>
        <Col>
        <DependensesFieldes parent={colRight[0]} Component={ValidationField} childrens={colRight.slice(1)}/>


        </Col>
        <Col>
                <DependensesFieldes Component={ValidationField} childrens={colLeft}/>
        </Col>
      </Row>
    </div>
  );
};

export default FilterForm;
