"use client";

import CloseOrangeModal from "@/components/icons/CloseOrangeModal";
import { styleDefault } from "@/mui";
import { Button, Modal } from "@mui/material";
import { useState } from "react";
import Content from "./Content";

function FilterModal({ data, setData, children }) {
  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    <>
      {/* Button Modal */}
      <div onClick={handleOpen}>{children}</div>

      {/* Content Modal */}
      <Modal
        open={open}
        onClose={handleClose}
        className=" !overflow-hidden !max-h-[calc(100vh-16px)]"
      >
        <div
          style={styleDefault}
          className="!px-[16px] !my-[12px] 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"
        >
          <div>
            <div className="flex justify-between w-full">
              <p className="text-[#3B3B3B] text-[20px] font-bold">فیلترها</p>
              <Button
                className="cursor-pointer !p-0 flex items-center justify-center gap-1"
                onClick={handleClose}
                variant="text"
              >
                <CloseOrangeModal />
                <p className="text-[#F17732] text-[14px] font-normal">
                  حذف همه
                </p>
              </Button>
            </div>
            <Content data={data} setData={setData} />
          </div>
          <div className="flex justify-end w-full">
            <Button
              className="!px-3 !py-2 !text-[16px] !font-medium"
              onClick={handleClose}
              variant="contained"
            >
              اعمال تغییرات
            </Button>
          </div>
        </div>
      </Modal>
    </>
  );
}

export default FilterModal;
