import Input from '@/components/Input'
import Select from '@/components/Select'
import Table from '@/components/Table'
import { ColumnType } from '@/components/types/TableTypes'
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { Edit2, Trash } from 'iconsax-react'
import { AddressData } from '../types/Types'
import { useGetAddress } from '../hooks/useAddressData'
import ProgressBarEmail from './ProgressBarEmail'
import ToggleStatus from './ToggleStatus'
import RowActionsDropdown, { RowActionItem } from '@/components/RowActionsDropdown'

interface AddressTableProps {
    search: string
    status: string
    currentPage: number
    onSearchChange: (search: string) => void
    onStatusChange: (status: string) => void
    onPageChange: (page: number) => void
    onEdit: (address: AddressData) => void
    onDelete: (address: AddressData) => void
}

const AddressTable: FC<AddressTableProps> = ({
    search,
    status,
    currentPage,
    onSearchChange,
    onStatusChange,
    onPageChange,
    onEdit,
    onDelete
}) => {
    const { t } = useTranslation()
    const { data: addresses, isPending: isPendingAddress } = useGetAddress(search, status, currentPage, 10)

    const getRowActions = (address: AddressData): RowActionItem[] => [
        {
            label: 'ویرایش',
            icon: <Edit2 color='black' size={16} />,
            onClick: () => onEdit(address),
        },
        {
            label: 'حذف',
            icon: <Trash color='red' size={16} />,
            onClick: () => onDelete(address),
            className: 'text-red-600 hover:bg-red-50'
        }
    ]

    const columns: ColumnType<AddressData>[] = [
        {
            title: t('setting.address_title'),
            key: 'title',
            width: '200px'
        },
        {
            title: t('setting.email'),
            key: 'email',
            width: '300px',
            render: (item: AddressData) => (
                <div key={item.id} className='dltr flex justify-end'>
                    {item.emailAddress}
                </div>
            )
        },
        {
            title: t('setting.quota'),
            key: 'quota',
            width: '300px',
            render: (item: AddressData) => {
                return (
                    <ProgressBarEmail key={item.id} item={item} />
                )
            }
        },
        {
            title: t('setting.status'),
            key: 'status',
            width: '120px',
            align: 'center',
            render: (item: AddressData) => (
                <div key={item.id} className='dltr flex justify-end'>
                    <ToggleStatus defaultStatus={item.isActive} id={item.id} />
                </div>
            )
        },
        {
            title: 'عملیات',
            key: 'actions',
            width: '120px',
            align: 'center',
            render: (item: AddressData) => (
                <RowActionsDropdown
                    key={item.id}
                    actions={getRowActions(item)}
                />
            )
        }
    ]

    const statusOptions = [
        { value: 'all', label: 'همه' },
        { value: 'active', label: t('setting.active') },
        { value: 'inactive', label: t('setting.inactive') }
    ]

    return (
        <div className='flex-1'>
            <div className='flex gap-2 justify-between'>
                <div>
                    <Select
                        placeholder={t('setting.status')}
                        items={statusOptions}
                        className='w-[120px]'
                        value={status}
                        onChange={(e) => onStatusChange(e.target.value)}
                    />
                </div>

                <div className='flex-1'>
                    <Input
                        variant='search'
                        placeholder={t('setting.search')}
                        className='xl:w-[300px] flex-1'
                        value={search}
                        onChangeSearchFinal={onSearchChange}
                    />
                </div>
            </div>

            <Table
                isLoading={isPendingAddress}
                columns={columns}
                data={addresses?.data?.users}
                pagination={{
                    currentPage: currentPage,
                    totalPages: addresses?.data?.pager?.totalPages || 1,
                    onPageChange: onPageChange
                }}
            />
        </div>
    )
}

export default AddressTable 