"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;