'use client'
import { useEffect, useState } from 'react'
import { useQuery } from '@tanstack/react-query';
import moment from 'moment';
import Cookies from 'js-cookie';
import ExportModal from '@/Component/Common/ExportModal';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import { AdminSubscriptionHistoryAPI, BaseURL, GetExportSubscriptionPaymentAPI } from '@/Utils/APIRequest/Endpoints';
import { useTranslation } from '@/Utils/Hooks/useTranslate';
import AdminPaymentSubscriptionAllHistoryTable from './AdminPaymentSubscriptionAllHistoryTable';
import AdminPaymentSubscriptionHistoryTable from './AdminPaymentSubscriptionHistoryTable';

const AdminPaymentSubscriptionHistory = () => {
    const { translations } = useTranslation();
    const [historySearch, setHistorySearch] = useState('');
    const [historyTab, setHistoryTab] = useState("all");
    const [modal, setModal] = useState<any>(null);
    const [historyParams, setHistoryParams] = useState({ status: 'all', page: 1, per_page: 10, sort_by: "created_at", sort: 'ASC' });

    const [openExportModal, setOpenExportModal] = useState(false)
    const [subscriptionStatus, setSubscriptionStatus] = useState("all")
    const [exportSearch, setExportSearch] = useState("")
    const [dateRange, setDateRange] = useState<any>([moment().subtract(15, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]);
    const [excelData, setExcelData] = useState(false);

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

    const handleHistoryTabClick = (tabName) => {
        setHistoryTab(tabName);
        setHistoryParams({ ...historyParams, status: tabName, page: 1, })
    }

    const { data, fetchStatus: GetExportFetchStatus} = useQuery({
        queryKey: [GetExportSubscriptionPaymentAPI, historySearch, historyParams, excelData], queryFn: () => CustomFetch({
            url: GetExportSubscriptionPaymentAPI, params: { search: exportSearch ? exportSearch : null, start_date: moment(dateRange[0]).format('YYYY-MM-DD'), end_date: moment(dateRange[1]).format('YYYY-MM-DD'), status: subscriptionStatus, access_token: Cookies.get('aat') || Cookies.get("verifyUAT") }
        }, null, false), enabled: excelData, refetchOnWindowFocus: false, select: (data) => data?.data
    })

    useEffect(() => {
        if (data && excelData && historyTab == 'all') {
            let startDate = moment(dateRange[0]).format('YYYY-MM-DD')
            let endDate = moment(dateRange[1]).format('YYYY-MM-DD')
            let access_token = Cookies.get('aat') || Cookies.get("verifyUAT")
            let str = `${BaseURL}${GetExportSubscriptionPaymentAPI}?start_date=${startDate}&end_date=${endDate}&access_token=${access_token}`
            if (subscriptionStatus) {
                str = `${str}&status=${subscriptionStatus}`
            }
            if (exportSearch) {
                str = `${str}&search=${exportSearch ? exportSearch : null}`
            }

            setOpenExportModal(false)
            window.location.href = str
            setExcelData(false)
        }
    }, [data, excelData])

    const callbackFunction = () => {
        setOpenExportModal(true)
    }

    const exportExcelFunction = () => {
        setExcelData(true)
    }

    return (
        <>
            <div className="flex items-center border-b border-lightGray *:py-1 mb-5 *:whitespace-nowrap overflow-hidden overflow-x-auto pb-5 gap-3">
                <span onClick={() => handleHistoryTabClick("all")} className={`${historyTab == 'all' ? 'text-white bg-primary font-medium border-transparent' : 'text-black font-medium border-lightGray'} text-sm cursor-pointer border rounded-full px-5`}>
                    All
                </span>
                <span onClick={() => handleHistoryTabClick("pending")} className={`${historyTab == 'pending' ? 'text-white bg-primary font-medium border-transparent' : 'text-black font-medium border-lightGray'} text-sm cursor-pointer border rounded-full px-5`}>
                    Pending
                </span>
                <span onClick={() => handleHistoryTabClick("active")} className={`${historyTab == 'active' ? 'text-white bg-primary font-medium border-transparent' : 'text-black font-medium border-lightGray'} text-sm cursor-pointer border rounded-full px-5`}>
                    Active
                </span>
                <span onClick={() => handleHistoryTabClick("incomplete")} className={`${historyTab == 'incomplete' ? 'text-white bg-primary font-medium border-transparent' : 'text-black font-medium border-lightGray'} text-sm cursor-pointer border rounded-full px-5`}>
                    Incomplete
                </span>
                <span onClick={() => handleHistoryTabClick("canceled")} className={`${historyTab == 'canceled' ? 'text-white bg-primary font-medium border-transparent' : 'text-black font-medium border-lightGray'} text-sm cursor-pointer border rounded-full px-5`}>
                    Cancelled
                </span>
            </div>
            {historyTab == 'all' ?
                <AdminPaymentSubscriptionAllHistoryTable
                    searchBtnProps={{
                        setSearch: setHistorySearch,
                        title: "Export",
                        callBack: callbackFunction
                    }}
                    apiData={{
                        data: AdminSubHistoryData,
                        params: historyParams,
                        setParams: setHistoryParams,
                        isPending: isPending,
                        fetchStatus: fetchStatus
                    }}
                    setModal={setModal}
                    search={historySearch}
                    translations={translations}
                    refetch={refetch}
                /> :
                <AdminPaymentSubscriptionHistoryTable
                    searchBtnProps={{
                        setSearch: setHistorySearch,
                        title: "Export",
                        callBack: callbackFunction
                    }}
                    apiData={{
                        data: AdminSubHistoryData,
                        params: historyParams,
                        setParams: setHistoryParams,
                        isPending: isPending,
                        fetchStatus: fetchStatus
                    }}
                    setModal={setModal}
                    search={historySearch}
                    translations={translations}
                    refetch={refetch}
                />
            }
            {openExportModal && <ExportModal modal={openExportModal} setModal={setOpenExportModal} callbackFunction={exportExcelFunction} statusProps={false} subscriptionStatusProps={true} paymentStatusProps={false} subscriptionStatus={subscriptionStatus} setSubscriptionStatus={setSubscriptionStatus} dateRange={dateRange} setDateRange={setDateRange} categoryProps={false} industryProps={false} exportSearch={exportSearch} setExportSearch={setExportSearch} loader={GetExportFetchStatus == "fetching"} headerTitle={"Export Subscription Data"} />}
        </>
    )
}

export default AdminPaymentSubscriptionHistory