import { FC, Fragment, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Td from '../../components/Td'
import Detail from './components/Detail'
import { useGetTransactions } from './hooks/useTransactionData'
import PageLoading from '../../components/PageLoading'
import { TransactionItemType } from './types/TransactionTypes'
import moment from 'moment-jalaali'
import Pagination from '../../components/Pagination'
import Input from '../../components/Input'
import DatePickerComponent from '../../components/DatePicker'
import { NumberFormat } from '../../config/func'

const TransactionList: FC = () => {

    const { t } = useTranslation('global')
    const [page, setPage] = useState<number>(1)
    const [userSearch, setUserSearch] = useState<string>('')
    const [dateSearch, setDateSearch] = useState<string>('')
    const [search, setSearch] = useState<string>('')
    const getTransactions = useGetTransactions(page, userSearch, dateSearch, search)

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

            <div className='flex justify-between items-center mt-12'>
                <div className='flex gap-4 items-center'>
                    <Input
                        variant='search'
                        placeholder={t('transaction.user_search')}
                        className='bg-white border border-border'
                        onChangeSearchFinal={(value) => setUserSearch(value)}
                    />
                    <DatePickerComponent
                        placeholder={t('ticket.date')}
                        className='w-36'
                        onChange={(date) => setDateSearch(date)}
                        defaulValue={dateSearch}
                    />
                </div>
                <div>
                    <Input
                        variant='search'
                        placeholder={t('search')}
                        className='bg-white border border-border'
                        onChangeSearchFinal={(value) => setSearch(value)}
                    />
                </div>
            </div>

            {
                getTransactions.isPending ?
                    <PageLoading />
                    :
                    <Fragment>

                        <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('ticket.number')} />
                                        <Td text={t('transaction.description')} />
                                        <Td text={t('transaction.amount')} />
                                        <Td text={t('ticket.date')} />
                                        <Td text={t('ticket.detail')} />
                                    </tr>
                                </thead>
                                <tbody>
                                    {
                                        getTransactions.data?.data?.transactions?.map((item: TransactionItemType) => {
                                            return (
                                                <tr key={item.id}>
                                                    <Td text={item.numericId + ''} />
                                                    <Td text={item.description} />
                                                    <Td text={NumberFormat(+item.amount)} />
                                                    <Td text={moment(item.createdAt).format('jYYYY-jMM-jDD')} />
                                                    <Td text={''}>
                                                        <Detail />
                                                    </Td>
                                                </tr>
                                            )
                                        })
                                    }
                                </tbody>
                            </table>
                        </div>

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

                    </Fragment>
            }
        </div >
    )
}

export default TransactionList