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.target.innerText })

    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: false },
                                codemeli: { value: '1741025645', isEdit: false },
                                name: { value: 'ساغر صابری نژاد', isEdit: false }
                            });
                        }}
                    >
                        <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