import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import DefaulModal from '../../../../components/DefaulModal'
import { useDeleteShopAdmin, useGetShopAdmins } from '../../hooks/useIconData'
import PageLoading from '../../../../components/PageLoading'
import Td from '../../../../components/Td'
import { ShopAdminType } from '../../types/Types'
import moment from 'moment-jalaali'
import TrashWithConfrim from '../../../../components/TrashWithConfrim'
import { toast } from '../../../../components/Toast';
import { ErrorType } from '../../../../helpers/types'
import Button from '../../../../components/Button'
import AddShopAdminForm from './AddShopAdminForm'

interface ShopAdminsModalProps {
    open: boolean
    close: () => void
    shopId: string
}

const ShopAdminsModal: FC<ShopAdminsModalProps> = ({ open, close, shopId }) => {
    const { t } = useTranslation('global')
    const { data: adminsData, isLoading, refetch } = useGetShopAdmins(shopId)
    const [showAddForm, setShowAddForm] = useState(false)

    const adminsList = adminsData?.data || []

    const { mutate: deleteAdmin, isPending } = useDeleteShopAdmin()

    const handleDeleteAdmin = (shopId: string, adminId: string) => {
        deleteAdmin({ shopId, adminId }, {
            onSuccess: () => {
                refetch()
                toast(t('success'), 'success')
            },
            onError: (error: ErrorType) => {
                toast(error.response?.data?.error?.message[0], 'error')
            }
        })
    }

    const handleAddAdmin = () => {
        setShowAddForm(true)
    }

    const handleFormSuccess = () => {
        refetch()
        setShowAddForm(false)
    }

    const handleFormClose = () => {
        setShowAddForm(false)
    }
    return (
        <DefaulModal
            open={open}
            close={close}
            title_header={t('shop.admins')}
            isHeader
        >
            <div className='mt-6'>
                {showAddForm ? (
                    <AddShopAdminForm
                        shopId={shopId}
                        onSuccess={handleFormSuccess}
                        onClose={handleFormClose}
                    />
                ) : (
                    <>
                        <div className='flex justify-end'>
                            <Button
                                onClick={handleAddAdmin}
                                className='w-fit px-5'
                            >
                                {t('shop.add_admin')}
                            </Button>
                        </div>
                        {
                            isLoading ?
                                <PageLoading />
                                :
                                <div className='relative overflow-x-auto rounded-3xl w-full mt-6'>
                                    <table className='w-full text-sm'>
                                        <thead className='thead'>
                                            <tr>
                                                <Td text={t('user.name')} />
                                                <Td text={t('shop.phone')} />
                                                <Td text={t('shop.role')} />
                                                <Td text={t('shop.created_at')} />
                                                <Td text={''} />
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {
                                                adminsList.map((admin: ShopAdminType) => {
                                                    return (
                                                        <tr key={admin.id} className='tr'>
                                                            <Td text={`${admin.firstName} ${admin.lastName}`} />
                                                            <Td text={admin.phone || '-'} />
                                                            <Td text={admin.roles[0].role?.name || '-'} />
                                                            <Td text={''}>
                                                                <div className='dltr text-right'>
                                                                    {moment(admin.createdAt).format('jYYYY-jMM-jDD HH:mm')}
                                                                </div>
                                                            </Td>
                                                            <Td text=''>
                                                                <div className='flex gap-2'>
                                                                    <TrashWithConfrim
                                                                        onDelete={() => handleDeleteAdmin(shopId, admin.id)}
                                                                        isLoading={isPending}
                                                                    />
                                                                </div>
                                                            </Td>
                                                        </tr>
                                                    )
                                                })
                                            }
                                        </tbody>
                                    </table>
                                </div>
                        }
                    </>
                )}
            </div>
        </DefaulModal>
    )
}

export default ShopAdminsModal
