import { FC, Fragment } from 'react'
import { useGetDetailCriticisms } from './hooks/useCriticismsData'
import { useParams } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import PageLoading from '../../components/PageLoading'
import { Paperclip2 } from 'iconsax-react'

const CriticismsDetail: FC = () => {

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

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

                        <div className='flex-1 mt-4 bg-white p-8 rounded-2xl'>
                            <div className='pb-6 border-b'>
                                <div>
                                    {getDetail.data?.data?.criticism?.title}
                                </div>

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

                            <div className='mt-6 text-sm'>
                                <div>
                                    {t('criticisms.documents')}
                                </div>

                                <div className='mt-4 text-xs flex flex-col gap-4'>
                                    {
                                        getDetail.data?.data?.criticism?.files?.map((item: { id: string, fileUrl: string }) => {
                                            return (
                                                <a href={item.fileUrl} target='_blank' key={item.id} className='flex gap-2 items-center text-[#0047FF]'>
                                                    <Paperclip2
                                                        className='size-6'
                                                        color='#0047FF'
                                                    />
                                                    <div>
                                                        {item.fileUrl.split('/')[item.fileUrl.split('/').length - 1]}
                                                    </div>
                                                </a>
                                            )
                                        })
                                    }
                                </div>
                            </div>
                        </div>
                    </Fragment>
            }
        </div>
    )
}

export default CriticismsDetail