"use client";

import { useState } from "react";
import { styleDefault } from "@/mui";
import { Box, Button, Modal, Rating, Slider } from "@mui/material";
import CloseModalD from "@/components/icons/CloseModalD";
import Field from "@/app/component/Field";
import ArrowLeftD from "@/components/icons/ArrowLeftD";
import ProgressChange from "@/app/component/ProgressChange";
import Link from "next/link";

function ModalAnswer({ doctor }) {
  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    <>
      <Button
        variant="outlined"
        onClick={handleOpen}
        className="!py-[6px] md:!py-2 lg:!py-[9px] !px-[16px] sm:!px-[23px] md:!px-[29px] 
                lg:!px-[36px] !mr-0 md:!mr-4 !rounded !w-full md:!w-fit"
      >
        ثبت نظر
      </Button>
      <Modal open={open} onClose={handleClose}>
        <Box
          sx={styleDefault}
          className="!w-full md:!min-w-[485px] !h-full md:!w-fit md:!h-fit !px-[24px] !pt-[22px] !pb-[30px] !rounded-none md:!rounded-lg"
        >
          <div className="flex items-center justify-between w-full">
            <p className="text-[16px] text-[#525252] font-bold">
              امتیاز شما به دکتر مهران امینی
            </p>
            <div className="cursor-pointer" onClick={handleClose}>
              <CloseModalD />
            </div>
          </div>
          <Rating
            className="!my-[24px]"
            dir="ltr"
            sx={{
              "& .MuiSvgIcon-root": {
                width: "16px",
                height: "16px",
              },
            }}
          />
          <ul className="flex w-full lg:w-fit flex-col items-start justify-start gap-1.5">
            {doctor.progress_detail.map((item, idx) => (
              <ProgressChange data={item} key={idx} />
            ))}
          </ul>
          <div className="flex flex-col gap-[16px] justify-center items-start mt-[24px]">
            <p className="text-[#495057] text-[16px] font-bold">متن نظر</p>
            <Field
              type="number"
              multiline={true}
              title="نظر خود را بنویسید..."
            />
            <Link href={`/booking/${doctor.id}`} className="!mr-auto">
              <Button
                variant="contained"
                className="!py-2.5 !px-4 gap-1 !text-[14px] !font-medium !mt-[32px] !shadownon"
              >
                دریافت نوبت
                <div className="w-[20px] h-[20px]">
                  <ArrowLeftD />
                </div>
              </Button>
            </Link>
          </div>
        </Box>
      </Modal>
    </>
  );
}

export default ModalAnswer;
