'use client'
import moment from 'moment'
import CustomTableHead from '@/Component/Common/Tables/CustomTableHead'
import { CategoryAPI, CategoryActiveInActiveAPI } 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 Link from 'next/link'
import ImageWithFallback from '@/Component/Common/ImageWithFallback'
import { useSelector } from 'react-redux'
import { AppStore } from '@/lib/store'

const AdminDisputeTable = (props) => {
    const { deleteModal, modal, setDeleteModal, setModal, apiData, translations } = props;
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
    const DisputeData = apiData?.data?.data

    const tableHeadData = {
        head: [
            { title: "Sr No.", sorting: false },
            { title: "Campaign Name", apiKey: "campaign_name", sorting: true },
            { title: "Brand Name", sorting: false },
            { title: "Influencer Name", sorting: false },
            { title: "Dispute by Brand", sorting: false },
            { title: "Dispute by Influencer", sorting: false },
            { title: "Created At", apiKey: "created_at", sorting: true },
            { title: "Status", apiKey: "status", sorting: true },
            { title: "Winner", sorting: false },
            { 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>
                    {
                        DisputeData?.length > 0
                            ?
                            DisputeData?.map((dispute, 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">
                                        {((apiData?.params.page - 1) * apiData?.params.per_page) + 1 + index}
                                    </td>
                                    <td className="px-5 py-4">
                                        {dispute?.campaign?.campaign_name}
                                    </td>

                                    <td className="px-5 py-4">
                                        <div className="flex items-center capitalize  whitespace-nowrap">
                                            <div className=' px-2 min-w-7 h-7 mr-2 relative rounded-full overflow-hidden'>
                                                {userDetails && <ImageWithFallback src={dispute?.brand?.image} alt='Profile' className='absolute w-full h-full object-cover left-0 right-0 top-0 bottom-0' height={48} width={48} />}
                                            </div>
                                            {dispute?.brand?.first_name} {dispute?.brand?.last_name}
                                        </div>
                                    </td>
                                    <td className="px-5 py-4">
                                        <div className="flex items-center capitalize  whitespace-nowrap">
                                            <div className=' px-2 min-w-7 h-7 mr-2 relative rounded-full overflow-hidden'>
                                                {userDetails && <ImageWithFallback src={dispute?.influencer?.image} alt='Profile' className='absolute w-full h-full object-cover left-0 right-0 top-0 bottom-0' height={48} width={48} />}
                                            </div>
                                            {dispute?.influencer?.first_name} {dispute?.influencer?.last_name} ({dispute?.influencer?.display_name})
                                        </div>
                                    </td>
                                    <td className="px-5 py-4">
                                        {dispute?.status == 'unsolved' ? dispute?.is_brand_despute ? 'Yes' : 'No' : '-'}
                                    </td>
                                    <td className="px-5 py-4">
                                        {dispute?.status == 'unsolved' ? dispute?.is_influencer_despute ? 'Yes' : 'No' : '-'}
                                    </td>
                                    <td className="px-5 py-4">
                                        {moment.utc(dispute?.created_at).local().format('DD MMM YYYY h:mm A')}
                                    </td>
                                    <td className="px-5 py-4">
                                        <span className={`capitalize text-xs font-semibold py-1 px-3 rounded-md ${dispute?.status == 'unsolved' ? 'bg-red-500/20 text-red-500' : 'bg-green-500/15 text-green-500'}`}>
                                            {dispute?.status}
                                        </span>
                                    </td>
                                    <td className="px-5 py-4">
                                        {dispute?.winner ?
                                            <span className="capitalize text-xs py-1 px-3 rounded-md bg-gradient-to-br from-secondary to-primary text-white">
                                                {dispute?.winner}
                                            </span> : 'TBD'}
                                    </td>
                                    <td className="px-5 py-4">
                                        <div className="flex items-center">
                                            <Link href={`/admin/disputes/${dispute?.slug}`} className='mr-3 p-0.5'>
                                                <TableEyeSVG />
                                            </Link>
                                        </div>
                                    </td>
                                </tr>
                            ))
                            : <NoDataTable colSpan={9} />
                    }
                </tbody>
            </table>
        </>
    )
}

export default TableHoc(AdminDisputeTable)