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

function DetailUser({ user }) {

    const [data, setData] = useState({
        phone: { value: user.phone, isEdit: false },
        national_code: { value: user.national_code, isEdit: false },
        name: { value: user.name, isEdit: false },
        date_of_birth: { value: user.date_of_birth, isEdit: false },
        father_name: { value: user.father_name, isEdit: false },
        insurance_number: { value: user.insurance_number, isEdit: false },
        home_phone: { value: user.home_phone, isEdit: false },
        work_phone: { value: user.work_phone, isEdit: false },
    });
    const [selected, setSelected] = useState({
        gender: '',
        blood_group: '',
        insurance: '',
        marital_status: '',
        education: '',
        job: '',
    });

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

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

    return (
        <div className="opacity-page">
            <Form
                data={data}
                selected={selected}
                changeData={changeData}
                updateSelect={updateSelect}
            />
            <Button
                className="!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
                !bg-[#5559CE] !rounded-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
                !mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]"
            >
                ثبت اطلاعات
                <ArrowLeftWhiteD />
            </Button>
        </div>
    )
}

export default DetailUser