

import { styleDefault } from "@/mui";
import { Modal } from "@mui/material";
import { useState } from "react";
import Content from "./Content";
import ButtonApply from "./ButtonApply";
import DeleteAllButton from "./DeleteAllButton";
import { useParams } from "next/navigation";

function FilterModal({
  slug: propSlug,
  filter,
  sendReq,
  children,
  setFilter,
  updateData,
  setDataInURL,
  setPage,
  setTotalPage,
}) {
  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => {
    setOpen(false);
  }; 


  const params = useParams()
  const slug = propSlug || params?.slug;
  return (
    <>
      {/* Button Modal */}
      <div onClick={handleOpen}>{children}</div>

      {/* Content Modal */}
      <Modal open={open} onClose={handleClose} className="w-full">
        <div
          style={styleDefault}
          className="!px-[16px] !overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] !w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between !max-h-screen md:!max-h-[calc(100%_-_32px)]"
        >
          <div>
            <DeleteAllButton
              slug={slug}
              filter={filter}
              sendReq={sendReq}
              setFilter={setFilter}
              handleClose={handleClose}
              setPage={setPage}
              setTotalPage={setTotalPage}
            />
            <Content
              filter={filter}
              setFilter={setFilter}
              updateData={updateData}
              setDataInURL={setDataInURL}
            />
          </div>
          
          <ButtonApply sendReq={sendReq} setOpen={setOpen} />
        </div>
      </Modal>
    </>
  );
}

export default FilterModal;
