import moment from 'moment'
import CustomTableHead from '@/Component/Common/Tables/CustomTableHead'
import { KeywordAPI } from '@/Utils/APIRequest/Endpoints'
import { CustomToast } from '@/Utils/CustomToast'
import TableHoc from '@/Utils/HOC/TableHoc'
import usePost from '@/Utils/Hooks/usePost'
import { TableDeleteSVG, TableEditSVG } from '@/Component/Common/SVGs/CommonSVG'
import NoDataTable from '@/Component/Common/Tables/NoData/NoDataTable'
import ConfirmationModal from '@/Component/Common/Modal/ConfirmationModal'
import KeywordModal from './KeywordModal'

const KeywordTable = (props) => {
    const { deleteModal, modal, setDeleteModal, setModal, apiData, translations, locale } = props
    const KeywordData = apiData?.data?.data

    const getTranslation = (keyword: any, languageCode: string) => {
        return keyword?.translations?.find((translation: any) => translation?.language_code === languageCode);
    };

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

    const tableHeadData = {
        head: [
            { title: "Sr No.", sorting: false },
            { title: "Keyword", apiKey: "keyword", sorting: true },
            ...(locale !== "en" ? [{ title: `Keyword in ${locale?.toUpperCase()}`, sorting: false }] : []),
            ...(locale !== "en" ? [{ title: "Languages", sorting: false }] : []),
            { title: "Created At", apiKey: "created_at", sorting: true },
            { title: "Action", sorting: false }
        ].filter(Boolean)
    }

    const callbackFunction = () => {
        mutate()
    }
    return (
        <>
            <table className="w-full text-sm text-left rtl:text-right">
                <CustomTableHead tableHeadData={tableHeadData} params={apiData?.params} setParams={apiData?.setParams} />
                <tbody>
                    {
                        KeywordData?.length > 0
                            ?
                            KeywordData?.map((keyword, 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-7">
                                        {((apiData?.params.page - 1) * apiData?.params.per_page) + 1 + index}
                                    </td>
                                    <td className="px-5 py-4 w-48 whitespace-nowrap">
                                        {getTranslation(keyword, 'en')?.keyword ?? keyword?.translations?.[0]?.keyword}
                                    </td>
                                    {locale !== "en" && (
                                        <td className="px-5 py-4 w-48">
                                            {getTranslation(keyword, locale)?.keyword ?? '-'}
                                        </td>
                                    )}
                                    {locale !== "en" && (
                                        <td className="px-5 py-4 uppercase w-48">
                                            {keyword?.translations?.map((t: any) => t?.language_code).join(', ') || '-'}
                                        </td>
                                    )}
                                    <td className="px-5 py-4 w-48">
                                        {moment.utc(keyword?.created_at).local().format('DD MMM YYYY')}
                                    </td>
                                    <td className="px-5 py-4 w-48">
                                        <div className="flex items-center">
                                            <button onClick={() => setModal(keyword)} className='mr-3 p-0.5'>
                                                <TableEditSVG />
                                            </button>
                                            <button type='button' className='p-0.5' onClick={() => setDeleteModal(keyword)} title='Delete'>
                                                <TableDeleteSVG />
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            ))
                            : <NoDataTable colSpan={8} />
                    }
                </tbody>
            </table>
            {modal && <KeywordModal modal={modal} setModal={setModal} refetch={apiData?.refetch} />}
            {deleteModal && <ConfirmationModal loader={deleteLoader} modal={deleteModal} args={{ message: 'Are you sure you want to delete this keyword', buttonText: 'Submit' }} setModal={setDeleteModal} callbackFunction={callbackFunction} translations={translations} />}
        </>
    )
}

export default TableHoc(KeywordTable)