"use client";
import FilterAltIcon from "@mui/icons-material/FilterAlt";
import { IconButton, Tooltip, Badge } from "@mui/material";
import useDataTable from "@/lib/hooks/useDataTable";

function FilterButton({ drawerState, setDrawerState }) {
  const { filterData } = useDataTable();
  const isValueEmpty = (value) => {
    if (Array.isArray(value)) {
      return value.length === 0 || value.every((v) => v === "");
    }
    return value === "" || value === null || value === undefined;
  };
  const filteredFilterData = Object.values(filterData).filter(
    (filter) => !isValueEmpty(filter.value),
  );
  return (
    <Tooltip title="فیلتر">
      <IconButton
        onClick={() => {
          setDrawerState(!drawerState);
        }}
        aria-label="filter table"
      >
        <Badge
          badgeContent={filteredFilterData.length}
          color="primary"
          anchorOrigin={{
            vertical: "top",
            horizontal: "left",
          }}
        >
          <FilterAltIcon />
        </Badge>
      </IconButton>
    </Tooltip>
  );
}
export default FilterButton;
