"use client";
import styles from "@/styles/Component/Dashboard/AreaManager.module.scss";
import { useEffect, useMemo, useState } from "react";
import BarGraph from "./components/BarGraph";
import { SuspenseLoader } from "@/components/App/Loader";
import LineGraph from "./components/LineGraph";
import { useRequest } from "@/components/App/request";
import { GraphProvider, useGraph } from "./context/GraphContext";
import GraphFilter from "./components/GraphFilter";


const GraphsContent = () => {
  const [hydrated, setHydrated] = useState(false);
  const { loading } = useRequest();
  const { leadData } = useGraph();

  const isLoadingArea = useMemo(() => loading.AREA_LIST_LOADING, [loading]);
  useEffect(() => setHydrated(true), []);

  if (hydrated === false && isLoadingArea) return <></>;
  if (!leadData) return <SuspenseLoader />;
console.log('dfd',leadData);
  return (
    <div className={`${styles.AreaManagerBlock}`}>
      <div className={styles.LeadsLimitationHead}>
        <div className="row w-100">
          <div className="col-md-12">
            <h1 className="">Graphs</h1>
          </div>
          <div className="col-md-12 d-flex justify-content-end">
            <GraphFilter />
          </div>
        </div>
      </div>
      <div className={`${styles.AreaManagerCard} mb-5 mt-0`}>
        <div className={styles.AreaManagerCardInner}>
          {Array.isArray(leadData?.leads) && (
            <BarGraph
              chartGraph={leadData?.leads}
              filter = {leadData?.filter}
            />
          )}
        </div>
      </div>
      <div className={styles.AreaManagerCard}>
        <div className={styles.AreaManagerCardInner}>
          {Array.isArray(leadData?.leads) && (
            <LineGraph
              chartGraph={leadData?.leads}
              filter = {leadData?.filter}
            />
          )}
        </div>
      </div>
    </div>
  );
};

const Graphs = () => {
  return (
    <GraphProvider>
      <GraphsContent />
    </GraphProvider>
  );
};

export default Graphs;