"use client";
import { SuspenseLoader } from "@/components/App/Loader";
import useFetchData from "@/components/App/useFetchData";
import styles from "@/styles/Component/Dashboard/AreaManager.module.scss";
import { Button, Col, Form, Image, Row } from "react-bootstrap";
import { Formik, Form as FormikForm, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import { useRequest } from "@/components/App/request";
import { toastrC } from "@/utils/helpers";

interface AreaListData {
  id: number;
  code: string;
  name: string;
  status: number;
  suspend_unsuspend_status: number;
  pause_unpause_status: number;
  distribution_factor: number;
  drm: number;
  created_at: string;
  updated_at: string;
}
interface AreaSelectionData {
  id: number;
  code: string;
  name: string;
  status: number;
  suspend_unsuspend_status: number;
  pause_unpause_status: number;
  distribution_factor: number;
  drm: number;
  created_at: string;
  updated_at: string;
  pivot: {
    member_id: number;
    area_id: number;
  };
}
const validationSchema = Yup.object().shape({
  selectedAreas: Yup.array()
    .min(1, "Please select at least one area")
    .required("Selection is required")
});

const AreaManager = () => {
  const { request } = useRequest();
  const { data, isLoading } = useFetchData<AreaListData[]>("AREA_LIST");
  const { data: selectedAreas, isLoading: selectedAreasLoading } = useFetchData<
    AreaSelectionData[]
  >("MEMBER_SELECTED_AREA");

  if (isLoading) return <SuspenseLoader />;
  if (selectedAreasLoading) return <SuspenseLoader />;
  const handleSubmit = async (values, { setSubmitting }) => {
    try {
      setSubmitting(true);
      const res = await request("SELECT_AREA", {
        area_id: values.selectedAreas
      });
      toastrC(res.message, "success");
    } catch (err) {
      console.log(err);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className={styles.AreaManagerBlock}>
      <h1>Area Manager</h1>
      <div className={styles.AreaManagerCard}>
        <h3>New Selection</h3>
        <Formik
          initialValues={{
            selectedAreas: selectedAreas
              ? selectedAreas.map(area => area.pivot.area_id) // Extract already selected area IDs
              : []
          }}
          validationSchema={validationSchema}
          onSubmit={handleSubmit}
        >
          {({ values, setFieldValue, isSubmitting }) => {
            return (
              <FormikForm>
                <div className={styles.AreaManagerCardInner}>
                  <Row>
                    {Array.isArray(data) &&
                      data.map(area => (
                        <Col
                          key={area.code}
                          xs={12}
                          sm={6}
                          md={6}
                          lg={4}
                          xl={3}
                          className={styles.AreaTag}
                        >
                          <Field
                            type="checkbox"
                            name="selectedAreas"
                            value={area.id}
                            as={Form.Check}
                            checked={values.selectedAreas.includes(area.id)}
                            onChange={() => {
                              const newSelected = values.selectedAreas.includes(
                                area.id
                              )
                                ? values.selectedAreas.filter(
                                    id => id !== area.id
                                  )
                                : [...values.selectedAreas, area.id];
                              setFieldValue("selectedAreas", newSelected);
                            }}
                            className={`${styles.customCheckBoxOrange} customCheckBox`}
                            label={`${area.name}`}
                          />
                        </Col>
                      ))}
                  </Row>

                  <div className="row">
                    <div className="col-md-12">
                      <div className={styles.SelectedBoxes}>
                        <h6 className={styles.Heading}>Selected Areas</h6>
                        <div className={styles.SelectedAreaList}>
                          {Array.isArray(data) &&
                            data
                              .filter(area =>
                                values.selectedAreas.includes(area.id)
                              )
                              .map(area => `${area.name}`)
                              .join(",  ")}
                        </div>
                      </div>
                    </div>
                  </div>

                  <ErrorMessage
                    name="selectedAreas"
                    component="div"
                    className="text-danger mt-2"
                  />

                  <span className={styles.AreasSelected}>
                    {values.selectedAreas.length} Areas selected
                  </span>
                </div>

                <Button
                  type="submit"
                  className="btn-custom"
                  disabled={isSubmitting}
                >
                  {isSubmitting ? "Submitting..." : "Submit"}
                  <Image src="../../assets/cursor-icon.png" alt="cursor-icon" />
                </Button>
              </FormikForm>
            );
          }}
        </Formik>
      </div>
    </div>
  );
};

export default AreaManager;