nerd_project_dashboard/src/Pages/Package/PackageItem/Model/ModelForm.tsx

import { Col, Row } from "reactstrap";
import ValidationField from "../../../../Components/ValidationField/ValidationField";
import { useGetAllGrade } from "../../../../api/grade";
import { useGetAllSubject } from "../../../../api/subject";
import { useGetAllUnit } from "../../../../api/unit";
import { useGetAllCurriculum } from "../../../../api/curriculum";
import { useGetAllLesson } from "../../../../api/lesson";
import { useFormikContext } from "formik";
import { PackageInitialValues } from "../../../../types/Package";
import { useValidationValidationParamState } from "../../../../Components/ValidationField/state/ValidationValidationParamState";
import { useEffect } from "react";
import ConfigurationField from "../../Field/ConfigurationField";
import FieldGroup from "../../Field/FieldGroup";

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

  const { ValidationParamState } = useValidationValidationParamState();
  const {
    GradeName, GradeCurrentPage,
    SubjectName, SubjectCurrentPage,
    UnitName, UnitCurrentPage,
    CurriculumName, CurriculumCurrentPage,
    LessonName, LessonCurrentPage


  } = ValidationParamState;

  const { curriculums_ids, grade_id, subjects_ids, units_ids, lessons_ids } = values;




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


  /// subjects_ids 
  const SubjectDisabled = !!subjects_ids && subjects_ids?.length > 0;
  const { data: Subject, isLoading: isLoadingSubject } = useGetAllSubject({
    grade_id: grade_id,
    name: SubjectName,
    page: SubjectCurrentPage
  }, { enabled: GradeDisabled });
  const SubjectOption = Subject?.data ?? []
  const canChangeSubjectPage = !!Subject?.links?.next;
  const SubjectPage = Subject?.meta?.currentPage;

  /// units_ids 
  const UnitDisabled = !!units_ids && units_ids?.length > 0;
  const { data: Unit, isLoading: isLoadingUnit } = useGetAllUnit({
    subjects_ids: subjects_ids,
    name: UnitName,
    page: UnitCurrentPage
  }, { enabled: SubjectDisabled });
  const UnitOption = Unit?.data ?? []
  const canChangeUnitPage = !!Unit?.links?.next;
  const UnitPage = Unit?.meta?.currentPage;

  /// curriculums_ids 
  const CurriculumDisabled = !!curriculums_ids && curriculums_ids?.length > 0;
  const { data: Curriculum, isLoading: isLoadingCurriculum } = useGetAllCurriculum({
    units_ids: units_ids,
    name: CurriculumName,
    page: CurriculumCurrentPage
  }, { enabled: UnitDisabled });
  const CurriculumOption = Curriculum?.data ?? []
  const canChangeCurriculumPage = !!Curriculum?.links?.next;
  const CurriculumPage = Curriculum?.meta?.currentPage;

  /// lessons_ids 
  const { data: Lesson, isLoading: isLoadingLesson } = useGetAllLesson({
    curriculums_ids: curriculums_ids,
    name: LessonName,
    page: LessonCurrentPage
  }, { enabled: CurriculumDisabled });
  const LessonOption = Lesson?.data ?? []
  const canChangeLessonPage = !!Lesson?.links?.next;
  const LessonPage = Lesson?.meta?.currentPage;



  useEffect(() => {
    const GradeChildren = (subjects_ids && subjects_ids?.length > 0 || units_ids && units_ids?.length > 0 || curriculums_ids && curriculums_ids?.length > 0 || lessons_ids && lessons_ids?.length > 0);

    if (!grade_id && GradeChildren) {
      setFieldValue("subjects_ids", []);
      setFieldValue("units_ids", []);
      setFieldValue("curriculums_ids", []);
      setFieldValue("lessons_ids", []);
      return;
    }
    console.log(1);
    
    const SubjectChildren = (units_ids && units_ids?.length > 0 || curriculums_ids && curriculums_ids?.length > 0 || lessons_ids && lessons_ids?.length > 0)
    console.log( subjects_ids && subjects_ids?.length < 1 && SubjectChildren);
    
    if (subjects_ids && subjects_ids?.length < 1 && SubjectChildren) {
      console.log(1);
      
      setFieldValue("units_ids", []);
      setFieldValue("curriculums_ids", []);
      setFieldValue("lessons_ids", []);
      return;
    }
    const UnitChildren = (curriculums_ids && curriculums_ids?.length > 0 || lessons_ids && lessons_ids?.length > 0)
    if (units_ids && units_ids?.length < 1 && UnitChildren) {
      setFieldValue("curriculums_ids", []);
      setFieldValue("lessons_ids", []);
      return;
    }
    const CurriculumChildren = (lessons_ids && lessons_ids?.length > 0)
    if (curriculums_ids && curriculums_ids?.length < 1 && CurriculumChildren) {
      setFieldValue("lessons_ids", []);
      return;
    }
  }, [grade_id, subjects_ids, units_ids, curriculums_ids])


  return (
    <Row className="w-100">
      <Col>
        <ValidationField placeholder="name" label="name" name="name" />
        <ValidationField placeholder="price" label="price" name="price" type="number" />
        <FieldGroup array_name='configuration' title='configuration' />
      </Col>
      <Col>

        {/* 
              grade_id
        */}
        <ValidationField
          searchBy="GradeName"
          name="grade_id"
          label="grade"
          type="Search"
          option={GradeOption}
          isLoading={isLoadingGrade}
          canChangePage={canChangeGradePage}
          PageName={"GradeCurrentPage"}
          page={GradePage}

        />

        {/* 
              subjects_ids
        */}

        <ValidationField
          searchBy="SubjectName"
          name="subjects_ids"
          label="subject"
          type="Search"
          option={SubjectOption}
          isMulti
          isLoading={isLoadingSubject}
          canChangePage={canChangeSubjectPage}
          PageName={"SubjectCurrentPage"}
          page={SubjectPage}
          disabled={!GradeDisabled}

        />


        {/* 
              units_ids
        */}

        <ValidationField
          searchBy="UnitName"
          name="units_ids"
          label="unit"
          type="Search"
          option={UnitOption}
          isMulti
          isLoading={isLoadingUnit}
          canChangePage={canChangeUnitPage}
          PageName={"UnitCurrentPage"}
          page={UnitPage}
          disabled={!SubjectDisabled}

        />


        {/* 
              curriculums_ids
        */}

        <ValidationField
          searchBy="CurriculumName"
          name="curriculums_ids"
          label="curriculum"
          type="Search"
          option={CurriculumOption}
          isMulti
          isLoading={isLoadingCurriculum}
          canChangePage={canChangeCurriculumPage}
          PageName={"CurriculumCurrentPage"}
          page={CurriculumPage}
          disabled={!UnitDisabled}

        />



        {/* 
              lessons_ids
        */}

        <ValidationField
          searchBy="LessonName"
          name="lessons_ids"
          label="lesson"
          type="Search"
          option={LessonOption}
          isMulti
          isLoading={isLoadingLesson}
          canChangePage={canChangeLessonPage}
          PageName={"LessonCurrentPage"}
          page={LessonPage}
          disabled={!CurriculumDisabled}

        />

      </Col>

    </Row>
  );
};

export default Form;