import { Col, Row } from "reactstrap";
import ValidationField from "../../../Components/ValidationField/ValidationField";
import { useGetAllPackage } from "../../../api/package";
import { useValidationValidationParamState } from "../../../Components/ValidationField/state/ValidationValidationParamState";
import { useGetAllStudent } from "../../../api/student";

const Form = () => {

  const { ValidationParamState } = useValidationValidationParamState();
  const {
    PackageName, PackageCurrentPage,
    StudentName, StudentCurrentPage,
  } = ValidationParamState;


  /// Package_id 
  const { data: Package, isLoading: isLoadingPackage } = useGetAllPackage({
    name: PackageName,
    page: PackageCurrentPage
  });
  const PackageOption = Package?.data ?? []
  const canChangePackagePage = !!Package?.links?.next;
  const PackagePage = Package?.meta?.currentPage;


    /// Student_id 
    const { data: Student, isLoading: isLoadingStudent } = useGetAllStudent({
      name: StudentName,
      page: StudentCurrentPage
    });
    const StudentOption = Student?.data ?? []
    const canChangeStudentPage = !!Student?.links?.next;
    const StudentPage = Student?.meta?.currentPage;

  return (
    <Row className="w-100">
      <Col>
      <ValidationField
          searchBy="StudentName"
          name="student_id"
          label="Student"
          type="Search"
          option={StudentOption}
          isLoading={isLoadingStudent}
          canChangePage={canChangeStudentPage}
          PageName={"StudentCurrentPage"}
          page={StudentPage}

        />
        <ValidationField
          searchBy="PackageName"
          name="package_id"
          label="Package"
          type="Search"
          option={PackageOption}
          isLoading={isLoadingPackage}
          canChangePage={canChangePackagePage}
          PageName={"PackageCurrentPage"}
          page={PackagePage}

        />
      </Col>
      <Col>
        <ValidationField name="activation_date" type="Date" />
        <ValidationField name="expiration_date" type="Date" />
      </Col>
    </Row>
  );
};

export default Form;
