import { styleDefault } from "@/mui";
import AddBtn from "@/components/dashboard/userAccount/components/AddBtn";
import UpdateBtn from "@/components/dashboard/userAccount/components/UpdateBtn";
import { Button, Modal } from "@mui/material";
import Content from "./Content";
import { useState } from "react";
import CloseModalD from "@/components/icons/CloseModalD";

function ModalAddRelatives({ open, setOpen, changeData }) {
  const contentItem = {
    name: "",
    relation: "",
    phone: "",
    address: "",
  };

  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
  const [newItem, setNewItem] = useState(contentItem);
  const handleAddData = () => {
    const changedKey = {
      name: newItem.name,
      relation: newItem.relation,
      contact: {
        phone: newItem.phone,
        address: newItem.address,
      },
    };

    changeData("add", "relatives", null, changedKey);
    setNewItem(contentItem);
    handleClose();
  };

  return (
    <>
      {/* Button Modal */}
      <>
        <UpdateBtn />
        <AddBtn handleOpen={handleOpen} />
      </>

      {/* 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>
            <div className="flex justify-between w-full">
              <p className="text-[#3B3B3B] text-[20px] font-bold">
                اضافه کردن بستگان
              </p>
              <Button onClick={handleClose} className="!p-1" variant="text">
                <CloseModalD />
              </Button>
            </div>
            <Content setData={setNewItem} />
          </div>
          <Button
            className="!mt-[32px] md:!mt-[36px] lg:!mt-[40px] !px-3 !py-2 !text-[16px] !font-medium !w-fit !mr-auto"
            onClick={handleAddData}
            disabled={
              !newItem.name ||
              !newItem.relation ||
              !newItem.phone ||
              !newItem.address
            }
            variant="contained"
          >
            اضافه کردن
          </Button>
        </div>
      </Modal>
    </>
  );
}

export default ModalAddRelatives;