import { useState } from "react";
import { Button } from "@mui/material";
import AddCircleBlueA from "@/components/icons/AddCircleBlueA";
import ArrowLeftB from "@/components/icons/ArrowLeftB";
import ButtonFixed from "../paying/ButtonFixed";
import Form from "./Form";

function Detail({
  isForAnother,
  setStep,
  setIsForAnother,
  data,
  setData,
  fadeElement,
  setIsPay,
}) {
  const [selected, setSelected] = useState({
    first: "",
    second: "",
  });

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

  const updateSelect = (event, name) =>
    setSelected({ ...selected, [name]: event });

  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]
            `}
      >
        <p className="text-[#3B3B3B] text-[20px] font-bold">
          {isForAnother ? "اطلاعات کاربر جدید" : "اطلاعات حساب کاربری"}
        </p>
        <Form
          isForAnother={isForAnother}
          updateSelect={updateSelect}
          changeData={changeData}
          data={data}
        />
        {!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>
        )}
        <ButtonFixed>
          <Button
            className={`
                    !flex !w-full md:!w-fit
                    !gap-[4px] md:!mr-auto !px-[12px] !py-[8px] md:!py-[9px] !min-w-[150px]
                    ${
                      isForAnother
                        ? "!mt-0 md:!mt-[40px]"
                        : "!mt-0 md:!mt-[32px]"
                    }`}
            variant="contained"
            onClick={() => setStep((prev) => prev + 1)}
          >
            <p className="text-[#EFEFEF] text-[16px] font-medium">
              ثبت اطلاعات
            </p>
            <ArrowLeftB />
          </Button>
        </ButtonFixed>
      </div>
    </div>
  );
}

export default Detail;