import { FC, Fragment } from 'react'
import { useTranslation } from 'react-i18next'
import { useGetLegalInfo } from '../../financial/hooks/useFinancialData'
import { useGetProfile } from '../../profile/hooks/useProfileData'


const LegalInfo: FC = () => {

    const { t } = useTranslation('global')
    const { data: d, isSuccess } = useGetLegalInfo()
    const getProfile = useGetProfile()

    const data = d?.data?.legalUser

    if (isSuccess)
        return (
            <Fragment>
                <div className='mt-8 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center text-xs'>
                    <div className='flex gap-2'>
                        <div className='text-description'>
                            {t('receip.type_person')}
                        </div>
                        <div>
                            {
                                t('receip.company')
                            }
                        </div>
                    </div>

                    <div className='flex gap-2'>
                        <div className='text-description'>
                            {t('receip.representativeـname')}
                        </div>
                        <div>
                            {getProfile.data?.data?.user?.firstName + ' ' + getProfile.data?.data?.user?.lastName}
                        </div>
                    </div>

                    <div className='flex gap-2'>
                        <div className='text-description'>
                            {t('receip.company_name')}
                        </div>
                        <div>
                            {data.registrationName}
                        </div>
                    </div>
                    <div className='flex gap-2'>
                        <div className='text-description'>
                            {t('receip.registration_number')}
                        </div>
                        <div>
                            {data.registrationCode}
                        </div>
                    </div>
                </div>

                <div className='mt-8 border-t pt-7 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center text-xs'>
                    <div className='flex gap-2'>
                        <div className='text-description'>
                            {t('receip.tel_company')}
                        </div>
                        <div>
                            {data.phone}
                        </div>
                    </div>

                    <div className='flex gap-2'>
                        <div className='text-description'>
                            {t('receip.national_code')}
                        </div>
                        <div>
                            {data?.nationalIdentity}
                        </div>
                    </div>

                    <div className='flex gap-2'>
                        <div className='text-description'>
                            {t('receip.postal_code')}
                        </div>
                        <div>
                            {data?.address?.postalCode}
                        </div>
                    </div>

                </div>

                <div className='mt-6 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center  text-xs'>
                    <div className='flex gap-2'>
                        <div className='text-description'>
                            {t('receip.state')}
                        </div>
                        <div>
                            {data?.address?.city?.province?.name}
                        </div>
                    </div>
                    <div className='flex gap-2'>
                        <div className='text-description'>
                            {t('receip.city')}
                        </div>
                        <div>
                            {data?.address?.city?.name}
                        </div>
                    </div>

                    <div className='flex gap-2'>
                        <div className='text-description'>
                            {t('receip.address')}
                        </div>
                        <div>
                            {data?.address?.fullAddress}
                        </div>
                    </div>
                </div>
            </Fragment>
        )
}

export default LegalInfo