"use client";
import ViewColumnIcon from "@mui/icons-material/ViewColumn";
import { IconButton, Tooltip, Badge } from "@mui/material";
import useDataTable from "@/lib/hooks/useDataTable";
import { flattenObjectOfObjects } from "@/core/utils/flattenObjectOfObjects";

function HideButton({ drawerState, setDrawerState }) {
  const { hideData } = useDataTable();
  const flattenHideData = flattenObjectOfObjects(hideData);
  const falseCount = Object.values(flattenHideData).filter(
    (value) => value === false,
  ).length;

  return (
    <Tooltip title="نمایش/مخفی کردن ستون ها">
      <IconButton
        onClick={() => {
          setDrawerState(!drawerState);
        }}
        aria-label="hide table column"
      >
        <Badge
          badgeContent={falseCount}
          color="primary"
          anchorOrigin={{
            vertical: "top",
            horizontal: "left",
          }}
        >
          <ViewColumnIcon />
        </Badge>
      </IconButton>
    </Tooltip>
  );
}

export default HideButton;
