import { type FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '../../../components/Button'
import { Add } from 'iconsax-react'
import CreateGroupIcon from './components/CreateGroupIcon'
import { useGetGroupIcons, useDeleteGroupIcon } from '../hooks/useIconData'
import Td from '../../../components/Td'
import Input from '../../../components/Input'
import PageLoading from '../../../components/PageLoading'
import TrashWithConfrim from '../../../components/TrashWithConfrim'
import { toast } from '../../../components/Toast';
import { ErrorType } from '../../../helpers/types'
import { GroupIconType } from '../types/Types'

const GroupIconList: FC = () => {

    const { t } = useTranslation('global')
    const [showModal, setShowModal] = useState<boolean>(false)
    const [search, setSearch] = useState<string>('')
    const { data: groupIcons, isLoading, refetch } = useGetGroupIcons()
    const deleteGroupIcon = useDeleteGroupIcon()

    const handleCloseModal = () => {
        setShowModal(false)
        refetch()
    }

    const handleDelete = (id: string) => {
        deleteGroupIcon.mutate(id, {
            onSuccess: () => {
                refetch()
                toast(t('success'), 'success')
            },
            onError: (error: ErrorType) => {
                toast(error.response?.data?.error?.message[0], 'error')
            }
        })
    }

    const groups = (groupIcons as unknown as { data?: GroupIconType[] })?.data || []
    const filteredGroups = groups.filter((group: GroupIconType) =>
        group.name.toLowerCase().includes(search.toLowerCase())
    )

    return (
        <div className='mt-4 min-h-[500px]'>
            <div className='flex justify-between items-center'>
                <div>
                    {t('icon.group_list')}
                </div>

                <Button
                    className='w-[172px]'
                    onClick={() => setShowModal(true)}
                >
                    <div className='flex gap-2 items-center'>
                        <Add size={20} color='white' />
                        <div>
                            {t('icon.add_new_group')}
                        </div>
                    </div>
                </Button>
            </div>

            <div className='mt-4'>
                <div className='flex justify-end items-center'>
                    <div className='xl:w-[300px] w-full'>
                        <Input
                            variant='search'
                            placeholder={t('ads.search')}
                            className='bg-white w-full'
                            onChangeSearchFinal={(value) => setSearch(value)}
                        />
                    </div>
                </div>
            </div>

            {
                isLoading ?
                    <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('icon.name')} />
                                    <Td text={t('icon.icons_count')} />
                                    <Td text={t('icon.created_at')} />
                                    <Td text={t('')} />
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    filteredGroups.map((item: GroupIconType) => {
                                        return (
                                            <tr key={item.id} className='tr'>
                                                <Td text={item.name} />
                                                <Td text={item.icons?.length?.toString() || '0'} />
                                                <Td text={new Date(item.createdAt).toLocaleDateString('fa-IR')} />
                                                <Td text={t('')}>
                                                    <div className='flex gap-2 items-center'>
                                                        <TrashWithConfrim
                                                            onDelete={() => handleDelete(item.id)}
                                                            isLoading={deleteGroupIcon.isPending}
                                                        />
                                                    </div>
                                                </Td>
                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                        </table>
                    </div>
            }

            <CreateGroupIcon
                open={showModal}
                close={handleCloseModal}
            />
        </div>
    )
}

export default GroupIconList