import CloseModalD from "@/components/icons/CloseModalD";
import { styleDefault } from "@/mui";
import { Box, Button, Modal } from "@mui/material";
import Radios from "./Radios";
import Form from "./Form";
import { useEffect, useState } from "react";

function ContentModal({
  open,
  data,
  setData,
  parent,
  dataChange,
  handleClose,
}) {
  const [value, setValue] = useState(0);
  const [isVacation, setIsVacation] = useState(false);

  const handleChange = (event) => {
    const valueRadio = +event.target.value;

    const newData = data;
    const { idx, is_morgen } = dataChange;
    newData[idx][is_morgen ? "morning_time" : "evening_time"][0] = "تعطیل";

    setIsVacation(valueRadio);
    setValue(valueRadio);
  };

  const closeModal = () => {
    handleClose();
    setValue(0);
  };

  return (
    <Modal open={open} onClose={closeModal}>
      <Box
        sx={styleDefault}
        className="!w-full !rounded-none md:!rounded-[8px] dark:!bg-[#222433] dark:!shadow-[0px_4px_25px_10px_#1F1D2B] 
        md:!w-fit !h-full md:!h-fit !py-[20px] !px-[16px] !pb-[56px]"
      >
        <div className="flex items-center justify-between">
          <p className="text-[#525252] dark:text-[#D7D8ED] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
            اضافه کردن روز کاری
          </p>
          <Button variant="text" className="!p-1" onClick={closeModal}>
            <CloseModalD />
          </Button>
        </div>
        <div className="mx-0 md:mx-[52px]">
          <Radios value={value} handleChange={handleChange} />
          <Form
            handleClose={closeModal}
            isVacation={value}
            dataChange={dataChange}
            setData={setData}
            parent={parent}
            value={value}
            data={data}
          />
        </div>
      </Box>
    </Modal>
  );
}

export default ContentModal;
