'use client';

import { useState } from "react";

import ContentText from "../../ContentText";
import EditField from "@/app/component/EditField";
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
import { bank, city, state } from "./listSelector";
import AddLocationP from "@/components/icons/AddLocationP";
import { Button } from "@mui/material";
import ArrowLeftButtonP from "@/components/icons/ArrowLeftButtonP";

function Form() {

    const [data, setData] = useState({
        name: { value: 'احسان احمدی', isEdit: false },
        national_code: { value: '123456789', isEdit: false },
        address: { value: '', isEdit: false },
        phone: { value: '', isEdit: false },
        account_number: { value: '', isEdit: false },
    });
    const [selected, setSelected] = useState({
        state: '',
        city: '',
        bank: ''
    });
    const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })

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

    return (
        <div className="flex flex-col items-start justify-start gap-[32px] md:gap-[40px] lg:gap-[48px]">
            <ul className="grid w-full grid-cols-1 md:grid-cols-2 mt-[24px] md:mt-[28px] lg:mt-[32px] gap-x-[48px] gap-y-[24px] md:gap-y-[28px] lg:gap-y-[32px]">
                <ContentText text='نام و نام خانوادگی'>
                    <EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.name} name='name' />
                </ContentText>
                <ContentText text='کد ملی'>
                    <EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.national_code} name='national_code' />
                </ContentText>
                <ContentText text='استان'>
                    <AutoCompleteSelect
                        updateData={updateSelect}
                        label='انتخاب کنید...'
                        name='state'
                        list={state}
                    />
                </ContentText>
                <ContentText text='شهر'>
                    <AutoCompleteSelect
                        updateData={updateSelect}
                        label='انتخاب کنید...'
                        name='city'
                        list={city}
                    />
                </ContentText>
                <ContentText text='آدرس'>
                    <EditField icon={<AddLocationP />} isTransparent={true} placeholder='از روی نقشه انتخاب کنید...' iconGray={true} changeData={changeData} data={data?.address} name='address' />
                </ContentText>
                <ContentText text='شماره موبایل'>
                    <EditField isTransparent={true} placeholder='شماره موبایل' iconGray={true} changeData={changeData} data={data?.phone} name='phone' />
                </ContentText>
                <ContentText text='شماره حساب'>
                    <EditField isTransparent={true} placeholder='شماره حساب' iconGray={true} changeData={changeData} data={data?.account_number} name='account_number' />
                </ContentText>
                <ContentText text='شهر'>
                    <AutoCompleteSelect
                        updateData={updateSelect}
                        label='انتخاب کنید...'
                        name='bank'
                        list={bank}
                    />
                </ContentText>
            </ul>
            <div className="w-full flex justify-end">
                <Button
                    variant="contained"
                    className="!gap-[4px] !py-[8px] !px-[24px] !rounded-[4px] !w-full md:!w-fit 
                    !shadow-none !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
                >
                    ثبت اطلاعات
                    <ArrowLeftButtonP />
                </Button>
            </div>
        </div>
    )
}

export default Form