import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import AvatarImage from '../../assets/images/avatar_image.png'
import Button from '../../components/Button'
import { DocumentUpload, Edit } from 'iconsax-react'
import Input from '../../components/Input'
import DatePickerComponent from '../../components/DatePicker'
import Select from '../../components/Select'
import Textarea from '../../components/Textarea'
import { useGetProfile } from './hooks/useProfileData'
import Username from './components/Username'

const Profile: FC = () => {

    const { t } = useTranslation('global')
    const getProfile = useGetProfile()

    return (
        <div className='mt-4 '>
            <div>
                {t('profile.account_user')}
            </div>

            <div className='bg-white rounded-3xl xl:p-6 p-4 mt-8 text-sm'>
                <div className='xl:mt-10 mt-4 flex xl:flex-row flex-col xl:gap-0 gap-7 xl:items-center border-b pb-7'>
                    <div className='flex-1'>
                        <div>
                            {t('profile.image_profile')}
                        </div>
                        <div className='text-description text-xs mt-2'>
                            {t('profile.image_profile_desc')}
                        </div>
                    </div>
                    <div className='flex-1 flex xl:gap-6 gap-4'>
                        <img src={AvatarImage} className='xl:size-20 size-14 rounded-full object-cover' />
                        <div>
                            <Button
                                className='xl:w-[160px] w-fit px-4 xl:;px-0 h-8 xl:h-10 text-xs xl:text-sm'
                            >
                                <div className='flex items-center gap-3'>
                                    <DocumentUpload color='white' size={18} />
                                    <div>{t('profile.upload_image')}</div>
                                </div>
                            </Button>
                            <p className='mt-3 text-description'>
                                {t('profile.format_image')}
                            </p>
                        </div>
                    </div>
                </div>

                <div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7 border-b pb-7'>
                    <div className='flex-1'>
                        <div>
                            {t('profile.info_account')}
                        </div>
                        <div className='text-description text-xs mt-2'>
                            {t('profile.auth_after_change_info')}
                        </div>
                    </div>
                    <div className='flex-1 '>
                        <Username
                            username={getProfile.data?.data?.user?.userName}
                        />
                        <div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
                            <Input
                                label={t('email')}
                                value={getProfile.data?.data?.user?.email}
                                readOnly
                            />
                            <div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
                                <Edit className='xl:size-[18px] size-4' color='#0047FF' />
                                <div>
                                    {t('edit')}
                                </div>
                            </div>
                        </div>
                        <div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
                            <Input
                                label={t('profile.phone_call')}
                                value={getProfile.data?.data?.user?.phone}
                                readOnly
                            />
                            <div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
                                <Edit className='xl:size-[18px] size-4' color='#0047FF' />
                                <div>
                                    {t('edit')}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7 border-b pb-7'>
                    <div className='flex-1'>
                        <div>
                            {t('profile.personal_information')}
                        </div>
                        <div className='text-description text-xs mt-2'>
                            {t('profile.enter_carefully_your_information')}
                        </div>
                    </div>
                    <div className='flex-1'>
                        <DatePickerComponent
                            label={t('profile.date_of_birth')}
                            onChange={() => { }}
                            placeholder=''
                            defaulValue='1400-01-01'
                        />

                        <div className='xl:mt-7 mt-4'>
                            <Input
                                label={t('profile.national_code')}
                                value={'۰۰۱۲۳۴۵۳۴۴'}
                            />
                        </div>
                    </div>
                </div>

                <div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7'>
                    <div className='flex-1'>
                        <div>
                            {t('profile.address')}
                        </div>
                        <div className='text-description text-xs mt-2'>
                            {t('profile.address_live')}
                        </div>
                    </div>
                    <div className='flex-1'>
                        <div className='rowTwoInput'>
                            <Select
                                label={t('profile.province')}
                                items={[
                                    {
                                        label: 'تهران',
                                        value: 'tehran'
                                    }
                                ]}
                                className='bg-white border'
                            />
                            <Select
                                label={t('profile.city')}
                                items={[
                                    {
                                        label: 'تهران',
                                        value: 'tehran'
                                    }
                                ]}
                            />
                        </div>

                        <div className='xl:mt-7 mt-4'>
                            <Input
                                label={t('profile.postal_code')}
                                value={'۱۲۳۴۵۶۷۸'}
                            />
                        </div>
                        <div className='xl:mt-7 mt-4'>
                            <Textarea
                                label={t('profile.address')}
                                value={'للورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک استورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است'}
                            />
                        </div>
                    </div>
                </div>

                <div className='h-20 xl:hidden'></div>
            </div>

        </div>
    )
}

export default Profile