import { useEffect, useState } from "react";
import { Button } from "@mui/material";
import AddCircleBlueA from "@/components/icons/AddCircleBlueA";
import ArrowRightS from "@/components/icons/ArrowRightS";
import Form from "./Form";
import { request } from "@/services/response";
import SubmitData from "./SubmitData";

function Detail({
  isForAnother,
  setStep,
  setIsForAnother,
  data,
  setData,
  prevData,
  fadeElement,
  setIsPay,
  doctor,
  selectedSlot,
  selectedDate,
  setAppointmentId,
}) {
  const [insurance, setInsurance] = useState();
  const [supplementaryInsurance, setSupplementaryInsurance] = useState();
  const [errors, setErrors] = useState({});

  const changeData = (value, type, name) =>
    setData({
      ...data,
      [name]: {
        ...data[name],
        [type]: value,
      },
    });

  useEffect(() => {
    // دریافت لیست بیمه پایه
    request.getInsuranceType().then((res) => {
      if (res && res.data) {
        setInsurance(res.data);
      }
    });

    // دریافت لیست بیمه تکمیلی
    request.getSupplementaryInsurance().then((res) => {
      if (res && res.data) {
        setSupplementaryInsurance(res.data);
      }
    });
  }, []);

  return (
    // ${typePay === 'success' || typePay === 'failed' ? 'bg-transparent border-transparent md:bg-[#FFF] md:border-[#EFEFEF]' : ''}
    <div className="w-full lg:w-[59%]">
      <div
        className={`opacity-page bg-[#FFF] border border-solid border-[#EFEFEF] 
            rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]
            `}
      >
        {/* دکمه برگشت */}
        <div
          className="cursor-pointer mb-[16px]"
          onClick={() => setStep(0)}
        >
          <ArrowRightS />
        </div>

        <p className="text-[#3B3B3B] text-[20px] font-bold">
          {isForAnother ? "اطلاعات کاربر جدید" : "اطلاعات حساب کاربری"}
        </p>
        <Form
          data={data}
          insurance={insurance}
          supplementaryInsurance={supplementaryInsurance}
          changeData={changeData}
          isForAnother={isForAnother}
          errors={errors}
        />
        {!isForAnother && (
          <Button
            className="!flex !items-center !justify-start !gap-[8px] !mt-[12px] sm:!mt-[16px] md:!mt-[20px] lg:!mt-[24px] !p-1"
            onClick={() => {
              setIsForAnother(true);
              setData({
                phone: { value: "09121056987", isEdit: true },
                codemeli: { value: "1741025645", isEdit: true },
                name: { value: "ساغر صابری نژاد", isEdit: true },
              });
            }}
          >
            <AddCircleBlueA />
            <p className="text-[#5559CE] text-[16px] font-medium">
              دریافت نوبت برای فرد دیگر{" "}
            </p>
          </Button>
        )}
        <SubmitData
          setStep={setStep}
          data={data}
          prevData={prevData}
          setErrors={setErrors}
          doctor={doctor}
          selectedSlot={selectedSlot}
          selectedDate={selectedDate}
          setAppointmentId={setAppointmentId}
        />
      </div>
    </div>
  );
}

export default Detail;