'use client'
import { AppStore } from '@/lib/store';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import { AddEditContactsAPI, ContactsAPI, DeleteAll, GroupContactsAPI } from '@/Utils/APIRequest/Endpoints';
import { CustomToast } from '@/Utils/CustomToast';
import usePost from '@/Utils/Hooks/usePost';
import { useTranslation } from '@/Utils/Hooks/useTranslate';
import { useQuery } from '@tanstack/react-query';
import moment from 'moment';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import React, { useEffect, useState } from 'react'
import { useSelector } from 'react-redux';
import ConfirmationModal from '@/Component/Common/Modal/ConfirmationModal';
import ContactListingTable from './ContactListingTable';
import AddGroupModal from '../AddGroupModal';
import { MdInfoOutline } from 'react-icons/md';

const ContactListing = () => {
    const { translations } = useTranslation();
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
    const router = useRouter()
    const pathName = usePathname()
    const queryParams = useSearchParams()
    const newQueryParams = new URLSearchParams(queryParams.toString());
    const [search, setSearch] = useState('');
    const [deleteModal, setDeleteModal] = useState<any>(null);
    const [deleteAllModal, setDeleteAllModal] = useState<any>(null);
    const [selectedItems, setSelectedItems] = useState<any>([]);
    const [addContactModal, setAddContactModal] = useState<any>(null);
    const [addGroupModal, setAddGroupModal] = useState<any>(null);
    const [params, setParams] = useState({ groupId: queryParams.get('groupId') });

    // API GET
    const { data: ContactsAPIData, isPending, fetchStatus, refetch } = useQuery({ queryKey: [ContactsAPI, search], queryFn: () => CustomFetch({ url: ContactsAPI, params: { search: search, ...params } }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data })

    // API DELETE ALL
    const { isPending: deleteAllLoader, mutate: mutateDeleteAll } = usePost(AddEditContactsAPI, null, (response) => {
        if (response.status == 200 || response.status == 204) {
            CustomToast("success", 'Selected contacts deleted successfully')
            setSelectedItems([]);
            setDeleteAllModal(null);
            refetch();
        }
    }, 'delete');

    const handleMultiDelete = (items) => {
        setDeleteAllModal({ ids: items, })
    }

    const callbackFunctionDeleteAll = () => {
        let obj: any = {
            groupId: queryParams.get('groupId'),
            contactIds: deleteAllModal.ids
        }
        mutateDeleteAll(obj)
    }

    const callbackAddContact = () => {
        setAddContactModal(true)
    }

    const callbackAddGroup = () => {
        setAddGroupModal({
            groupId: queryParams.get('groupId'),
        })
    }

    return (
        <>
            <div className="bg-blue-600/10 py-4 px-3 rounded-lg flex items-center justify-between mb-5">
                <div className="flex items-center gap-2">
                    <MdInfoOutline size={20} className='text-blue-600' />
                    <p className="text-blue-600 font-medium text-sm">Just to let you know — SendGrid processes these actions through their internal Job Queue, so the updates may take 1–2 minutes to appear. This small delay is normal and nothing to worry about.
                    </p>
                </div>

            </div>
            <ContactListingTable
                searchBtnProps={{
                    setSearch: setSearch,
                    title: "Add Contact",
                    callBack: callbackAddContact,
                    secondTitle: "Upload Contacts",
                    secondCallBack: callbackAddGroup
                }}
                apiData={{
                    userDetails: userDetails,
                    data: ContactsAPIData,
                    params: params,
                    setParams: setParams,
                    isPending: isPending,
                    refetch: refetch,
                    newQueryParams: newQueryParams,
                    fetchStatus: fetchStatus
                }}
                search={search}
                deleteModal={deleteModal}
                setDeleteModal={setDeleteModal}
                enableMultiDelete={true}
                selectedItems={selectedItems}
                onMultiDelete={handleMultiDelete}
                setSelectedItems={setSelectedItems}
                addContactModal={addContactModal}
                setAddContactModal={setAddContactModal}
                translations={translations}
                groupId={params.groupId}
            />

            {deleteAllModal && <ConfirmationModal loader={deleteAllLoader} modal={deleteAllModal} args={{ message: 'Are you sure you want to delete selected contact?' }} setModal={setDeleteAllModal} callbackFunction={callbackFunctionDeleteAll} translations={translations} />}
            {addGroupModal && <AddGroupModal modal={addGroupModal} setModal={setAddGroupModal} refetch={refetch} isFromContacts={true} translations={translations} />}
        </>
    )
}

export default ContactListing