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,
  setAppointmentExpiresAt,
  selectedServiceUuids = [],
  clinicUuid = null,
  resourceUuid = null,
}) {
  const [insurance, setInsurance] = useState();
  const [supplementaryInsurance, setSupplementaryInsurance] = useState();
  const [errors, setErrors] = useState({});
  const [selfData, setSelfData] = useState(null);

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

  const emptyPatientData = () => ({
    phone: { value: "", isEdit: true },
    national_code: { value: "", isEdit: true },
    name: { value: "", isEdit: true },
    family: { value: "", isEdit: true },
    gender: { value: "", isEdit: true },
    patient_reason: { value: "", isEdit: true },
  });

  const switchToAnother = () => {
    setSelfData(data);
    setIsForAnother(true);
    setErrors({});
    setData(emptyPatientData());
  };

  const switchToSelf = () => {
    setIsForAnother(false);
    setErrors({});
    if (selfData) setData(selfData);
  };

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

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

  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}
        />
        <Button
          className="!flex !items-center !justify-start !gap-[8px] !mt-[12px] sm:!mt-[16px] md:!mt-[20px] lg:!mt-[24px] !p-1"
          onClick={() => (isForAnother ? switchToSelf() : switchToAnother())}
        >
          <AddCircleBlueA />
          <p className="text-[#5559CE] text-[16px] font-medium">
            {isForAnother ? "نوبت برای خودم است" : "نوبت برای شخص دیگری است"}
          </p>
        </Button>
        <SubmitData
          setStep={setStep}
          data={data}
          prevData={prevData}
          setErrors={setErrors}
          doctor={doctor}
          isForAnother={isForAnother}
          selectedSlot={selectedSlot}
          selectedDate={selectedDate}
          setAppointmentId={setAppointmentId}
          setAppointmentExpiresAt={setAppointmentExpiresAt}
          selectedServiceUuids={selectedServiceUuids}
          clinicUuid={clinicUuid}
          resourceUuid={resourceUuid}
        />
      </div>
    </div>
  );
}

export default Detail;