import React from "react";
import styles from "@/styles/Component/Dashboard/GraphFilter.module.scss";
import DashboardTableMutlSelDropDwn from "../../Dashboard/dashboardTableMutlSelDropDwn";
import Filter from "./Filter";
import { useGraph } from "../context/GraphContext";

const GraphFilter: React.FC = () => {
  const {
    area,
    subscribedArea,
    handleSetSelArr,
    selectedFilter,
    setSelectedFilter,
    debouncedSearch,
    dateRange,
    setDateRange
  } = useGraph();

  return (
    <div className={`${styles.GraphFIlterCard}`}>

      <DashboardTableMutlSelDropDwn
        area={area}
        handlUpdSelArr={handleSetSelArr}
        tableData={subscribedArea}
      />

      <Filter
        selectedFilter={selectedFilter}
        setSelectedFilter={setSelectedFilter}
        setSearch={debouncedSearch}
        dateRange={dateRange}
        setDateRange={setDateRange}
      />

    </div>
  );
};

export default GraphFilter;