import { FC, Fragment } from 'react'
import { useParams } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import PageLoading from '../../components/PageLoading'
import { useGetMessageDetail } from './hooks/useMessagesData'
import Input from '../../components/Input'

const MessageDetail: FC = () => {

    const { id } = useParams()
    const { t } = useTranslation('global')
    const getDetail = useGetMessageDetail(id ? id : '')

    return (
        <div className='mt-4'>
            {
                getDetail.isPending ?
                    <PageLoading />
                    :
                    <Fragment>
                        <div>
                            {t('messages.message')}
                            {' #' + getDetail.data?.data?.contactUs?.numericId}
                        </div>

                        <div className='flex-1 mt-4 bg-white p-8 rounded-2xl'>

                            <div className='rowTwoInput'>
                                <Input
                                    label={t('service.fullName')}
                                    readOnly
                                    value={getDetail.data?.data?.contactUs?.fullName}

                                />
                                <Input
                                    label={t('email')}
                                    readOnly
                                    value={getDetail.data?.data?.contactUs?.email}

                                />
                            </div>

                            <div className='mt-7'>
                                <div>
                                    {getDetail.data?.data?.contactUs?.title}
                                </div>

                                <p className='mt-6 text-sm leading-6'>
                                    {getDetail.data?.data?.contactUs?.content}
                                </p>
                            </div>

                        </div>
                    </Fragment>
            }
        </div>
    )
}

export default MessageDetail