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

function Detail({ isForAnother, setIsForAnother, fadeElement, setIsPay }) {

    const [selected, setSelected] = useState({
        first: '',
        second: ''
    });
    const [data, setData] = useState({
        phone: { value: '09121056987', isEdit: false },
        codemeli: { value: '1741025645', isEdit: false },
        name: { value: 'ساغر صابری نژاد', isEdit: false }
    });

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

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

    return (
        <>
            <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-[24px] !p-1"
                    onClick={() => {
                        fadeElement(() => 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>
            )}
            <Button
                className={`
                    !gap-[4px] !mr-auto !flex !px-[12px] !py-[8px] !min-w-[150px] 
                    ${isForAnother ? '!mt-[94px]' : '!mt-[32px]'}`}
                variant="contained"
                onClick={() => fadeElement(() => setIsPay(true))}
            >
                <p className="text-[#EFEFEF] text-[16px] font-medium">ثبت اطلاعات</p>
                <ArrowLeftB />
            </Button>
        </>
    )
}

export default Detail