import { IconButton, Tooltip } from "@mui/material";
import { useState } from "react";
import DataTable_ShowHideColumnsMenu from "../menus/ShowHideColumnsMenu";

const DataTable_ShowHideColumnsButton = ({ table, ...rest }) => {
    const {
        options: {
            icons: { ViewColumnIcon },
            localization,
        },
    } = table;

    const [anchorEl, setAnchorEl] = useState(null);

    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };

    return (
        <>
            <Tooltip title={rest?.title ?? localization.showHideColumns}>
                <IconButton
                    aria-label={localization.showHideColumns}
                    onClick={handleClick}
                    {...rest}
                    title={undefined}
                >
                    <ViewColumnIcon />
                </IconButton>
            </Tooltip>
            {anchorEl && (
                <DataTable_ShowHideColumnsMenu
                    anchorEl={anchorEl}
                    setAnchorEl={setAnchorEl}
                    table={table}
                />
            )}
        </>
    );
}
export default DataTable_ShowHideColumnsButton