import { useCallback, useState } from "react";
import FilterButton from "./FilterButton";
import { Box, Drawer } from "@mui/material";
import FilterDrawer from "../../FilterDrawer";

const FilterCustom = ({ filterData, setFilterData }) => {
  const [open, setOpen] = useState(false);

  const closeDrawer = useCallback(() => setOpen(false), []);

  return (
    <>
      <FilterButton drawerState={open} setDrawerState={setOpen} />
      <Drawer
        open={open}
        onClose={() => setOpen(false)}
        sx={{
          overflowY: "hidden",
          display: "flex",
          flexDirection: "column",
          height: "100%",
          zIndex: "1300",
        }}
      >
        <Box sx={{ width: { xs: 300, sm: 450 } }}>
          {open && (
            <FilterDrawer
              defaultValues={filterData}
              setFilterData={setFilterData}
              closeDrawer={closeDrawer}
            />
          )}
        </Box>
      </Drawer>
    </>
  );
};
export default FilterCustom;
