import Link from 'next/link'
import moment from 'moment'
import ImageWithFallback from '@/Component/Common/ImageWithFallback'
import CustomTableHead from '@/Component/Common/Tables/CustomTableHead'
import { MarketingCampaignAPI } from '@/Utils/APIRequest/Endpoints'
import { CustomToast } from '@/Utils/CustomToast'
import TableHoc from '@/Utils/HOC/TableHoc'
import usePost from '@/Utils/Hooks/usePost'
import ActiveDeactiveStatus from '@/Component/Common/Tables/ActiveDeactiveStatus'
import { TableDeleteSVG, TableEditSVG, TableEyeSVG } from '@/Component/Common/SVGs/CommonSVG'
import NoDataTable from '@/Component/Common/Tables/NoData/NoDataTable'
import ConfirmationModal from '@/Component/Common/Modal/ConfirmationModal'
import { useState } from 'react'

const MarketingCampaignTable = (props) => {
    const { deleteModal, setDeleteModal, apiData, translations } = props;
    const CampaignData = apiData?.data?.data?.result;

    const [] = useState<any>([]);

    // API DELETE
    const { isPending: deleteLoader, mutate } = usePost(`${MarketingCampaignAPI}/${deleteModal?.id}?delete_contacts=false`, null, (response) => {
        if (response.status == 200 || response.status == 204) {
            CustomToast("success", 'Marketing Campaign deleted successfully')
            setDeleteModal(null);
            apiData?.refetch();
        }
    }, 'delete')


    const callbackFunction = () => {
        mutate()
    }

    const tableHeadData = {
        head: [
            { title: "Sr No.", sorting: false },
            { title: "Campaign Name", sorting: false },
            { title: "Categories", sorting: false },
            { title: "Status", apiKey: "status", sorting: true },
            { title: "Action", sorting: false },
        ]
    }

    return (
        <>
            <table className="w-full text-sm text-left rtl:text-right">
                <CustomTableHead tableHeadData={tableHeadData} params={apiData?.params} setParams={apiData?.setParams} />
                <tbody>
                    {
                        CampaignData?.length > 0
                            ?
                            CampaignData?.map((campaign, index) => (
                                <tr className="border-b border-lightGray last:border-none font-normal hover:bg-lightGray/20 align-middle" key={index}>
                                    <td className="px-5 py-4 w-10">
                                        {apiData.offset + index + 1}
                                    </td>
                                    <td className="px-5 py-4">
                                        {campaign?.name}
                                    </td>
                                    <td className="px-5 py-4">
                                        {campaign?.categories?.map((cat) => cat).join(", ")}
                                    </td>
                                    <td className="px-5 py-4 capitalize">
                                        {campaign?.status}
                                    </td>
                                    <td className="px-5 py-4 w-40">
                                        <div className="flex items-center">
                                            {campaign?.status == 'draft' &&
                                                <Link href={`/admin/marketing-campaigns/${campaign?.id}`} className='mr-3 p-0.5'>
                                                    <TableEditSVG />
                                                </Link>
                                            }
                                            {campaign?.status !== 'draft' &&
                                                <Link href={`/admin/marketing-campaigns/${campaign?.id}`} className='mr-3 p-0.5'>
                                                    <TableEyeSVG />
                                                </Link>
                                            }
                                            <button type='button' className='p-0.5' onClick={() => setDeleteModal(campaign)} title='Delete'>
                                                <TableDeleteSVG />
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            ))
                            : <NoDataTable colSpan={9} />
                    }
                </tbody>
            </table>
            {deleteModal && <ConfirmationModal loader={deleteLoader} modal={deleteModal} args={{ message: 'Are you sure you want to delete this campaign?' }} setModal={setDeleteModal} callbackFunction={callbackFunction} translations={translations} />}
        </>
    )
}

export default TableHoc(MarketingCampaignTable)