import { FC } from 'react'
import { useGetCardBanks } from './hooks/useCardBankData'
import PageLoading from '../../components/PageLoading'
import Td from '../../components/Td'
import { useTranslation } from 'react-i18next'
import { CreateBankItemType } from './types/CardBankTypes'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import Button from '../../components/Button'
import { Add, Eye } from 'iconsax-react'
import { usePermissions } from '../../hooks/usePermissions'

const CardBankList: FC = () => {

    const { t } = useTranslation('global')
    const { canCreate, canUpdate } = usePermissions()
    const getCardBanks = useGetCardBanks()

    return (
        <div className='mt-4'>

            <div className='flex w-full justify-between items-center'>
                <div>

                    {t('cardBank.manage_banks')}
                </div>
                <div>
                    {canCreate('bank_accounts') &&
                        <Link to={Pages.cardBank.create}>
                            <Button
                                className='px-5'
                            >
                                <div className='flex gap-2'>
                                    <Add
                                        className='size-5'
                                        color='#fff'
                                    />
                                    <div>{t('cardBank.add_account')}</div>
                                </div>
                            </Button>
                        </Link>
                    }
                </div>
            </div>
            {
                getCardBanks.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('cardBank.account_owner_name')} />
                                    <Td text={t('cardBank.bank_name')} />
                                    <Td text={t('cardBank.card_number')} />
                                    <Td text={t('cardBank.sheba')} />
                                    <Td text={t('ticket.detail')} />
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    getCardBanks.data?.data?.bankAccounts?.map((item: CreateBankItemType) => {
                                        return (
                                            <tr key={item.id} className='tr'>
                                                <Td text={item.accountOwnerName} />
                                                <Td text={item.bankName} />
                                                <Td text={item.cardNumber} />
                                                <Td text={item.IBan} />
                                                <Td text={''}>
                                                    {canUpdate('bank_accounts') &&
                                                        <Link to={Pages.cardBank.detail + item.id}>
                                                            <Eye size={20} color='#8C90A3' />
                                                        </Link>
                                                    }
                                                </Td>
                                            </tr>
                                        )
                                    })
                                }

                            </tbody>
                        </table>

                    </div>
            }
        </div>
    )
}

export default CardBankList