import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Td from '../../components/Td'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import { Eye } from 'iconsax-react'
import DatePickerComponent from '../../components/DatePicker'
import Input from '../../components/Input'
import { useGetMessages } from './hooks/useMessagesData'
import PageLoading from '../../components/PageLoading'
import moment from 'moment-jalaali'
import { MessageItemType } from './types/MessagesTypes'
import Pagination from '../../components/Pagination'

const MessagesList: FC = () => {

    const { t } = useTranslation('global')
    const [since, setSince] = useState<string>('')
    const [search, setSearch] = useState<string>('')
    const [page, setPage] = useState<number>(1)
    const getMessages = useGetMessages(page, search, since)


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

            <div className='mt-6 flex justify-between items-center'>
                <div>
                    <DatePickerComponent
                        onChange={setSince}
                        placeholder={t('messages.submit_date')}
                    />
                </div>

                <div>
                    <Input
                        placeholder={t('search')}
                        variant='search'
                        className='bg-white border'
                        onChangeSearchFinal={setSearch}
                    />
                </div>

            </div>

            {
                getMessages.isPending ?
                    <PageLoading />
                    :
                    <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
                        <table className='w-full text-sm '>
                            <thead className='thead'>
                                <tr>
                                    <Td text={t('messages.number')} />
                                    <Td text={t('messages.fullName')} />
                                    <Td text={t('messages.email')} />
                                    <Td text={t('messages.subject')} />
                                    <Td text={t('messages.date')} />
                                    <Td text={''} />
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    getMessages.data?.data?.contactUs?.map((item: MessageItemType) => {
                                        return (
                                            <tr key={item.id} className='tr'>
                                                <Td text={item.numericId + ''} />
                                                <Td text={item.fullName} />
                                                <Td text={item?.email} />
                                                <Td text={item.title} />
                                                <Td text={moment(item?.createdAt).format('jYYYY-jMM-jDD')} />
                                                <Td text={''}>
                                                    <Link to={Pages.messages.detail + item.id}>
                                                        <Eye size={20} color='black' />
                                                    </Link>
                                                </Td>
                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                        </table>

                        <div className='flex justify-end pb-4'>
                            <Pagination
                                currentPage={page}
                                onPageChange={setPage}
                                totalPages={getMessages.data?.data?.pager?.totalPages}
                            />
                        </div>
                    </div>
            }
        </div>
    )
}

export default MessagesList