"use client";

import { Box, Drawer, styled } from "@mui/material";
import HideBodyField from "@/core/components/DataTable/hide/HideBodyField";
import HideHeader from "@/core/components/DataTable/hide/HideHeader";
import useDataTable from "@/lib/hooks/useDataTable";
import HideOrShowAll from "@/core/components/DataTable/hide/HideOrShowAll";
import ScrollBox from "../../ScrollBox";

function HideBody({ columns, drawerState, setDrawerState }) {
  const { hideData, setHideData } = useDataTable();

  return (
    <Drawer
      open={drawerState}
      onClose={() => setDrawerState(false)}
      sx={{
        overflowY: "hidden",
        display: "flex",
        flexDirection: "column",
        height: "100%",
        zIndex: "1300",
      }}
    >
      <HideHeader setDrawerState={setDrawerState} />
      <HideOrShowAll hideData={hideData} setHideData={setHideData} />
      <ScrollBox>
        <Box sx={{ px: 1, py: 2, display: "flex", flexDirection: "column" }}>
          {columns.map((column) => (
            <HideBodyField
              key={column.id}
              column={column}
              hideData={hideData}
              setHideData={setHideData}
            />
          ))}
        </Box>
      </ScrollBox>
    </Drawer>
  );
}

export default HideBody;