import { useEffect, useState, Fragment } from 'react';
import { Tab } from '@headlessui/react';
import TransactionAll from '@/components/Affiliates/Transaction/All';
import TransactionPending from '@/components/Affiliates/Transaction/Pending';
import TransactionCompleted from '@/components/Affiliates/Transaction/Completed';
import TransactionCanceled from '@/components/Affiliates/Transaction/Canceled';

const TransactionsTab = () => {
    const [selectedIndexTransaction, setSelectedIndexTransaction] = useState(0);

    const [transactionCountStatus, setTransactionCountStatus] = useState<any>({
        pending: 0,
        completed: 0,
        canceled: 0,
    });

    const fetchDataCountTransaction = async () => {
        try {
            const api_url = process.env.API_URL;
            const response = await fetch(`${api_url}api/affiliate/transaction-count`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                },
                credentials: 'include', // Include this option
            });
            const res = await response.json();
            console.log(res);
            setTransactionCountStatus(() => {
                return {
                    pending: res.data.pending,
                    completed: res.data.completed,
                    canceled: res.data.canceled,
                };
            });
        } catch (error) {}
    };

    useEffect(() => {
        fetchDataCountTransaction();
    }, [selectedIndexTransaction]);

    return (
        <>
            <Tab.Group selectedIndex={selectedIndexTransaction} onChange={setSelectedIndexTransaction}>
                <Tab.List className="mx-5 mt-5 flex flex-wrap">
                    <Tab as={Fragment}>
                        {({ selected }) => (
                            <button
                                className={`${
                                    selected ? '!border-secondary text-secondary !outline-none dark:!bg-[#191e3a]' : ''
                                } flex items-center border-t-2 border-transparent bg-[#f6f7f8] p-7 py-3 before:inline-block hover:border-secondary hover:text-secondary dark:bg-transparent dark:hover:bg-[#191e3a]`}
                            >
                                All
                            </button>
                        )}
                    </Tab>
                    <Tab as={Fragment}>
                        {({ selected }) => (
                            <button
                                className={`${
                                    selected ? '!border-warning  !outline-none dark:!bg-[#191e3a]' : ''
                                } flex items-center border-t-2 border-transparent bg-[#f6f7f8] p-7 py-3 text-warning before:inline-block hover:border-warning hover:text-warning dark:bg-transparent dark:hover:bg-[#191e3a]`}
                            >
                                <span className="ms-2">Pending</span>
                                <span className="ms-1 text-xs">({transactionCountStatus.pending})</span>
                            </button>
                        )}
                    </Tab>
                    <Tab as={Fragment}>
                        {({ selected }) => (
                            <button
                                className={`${
                                    selected ? '!border-success  !outline-none dark:!bg-[#191e3a]' : ''
                                } flex items-center border-t-2 border-transparent bg-[#f6f7f8] p-7 py-3 text-success before:inline-block hover:border-success hover:text-success dark:bg-transparent dark:hover:bg-[#191e3a]`}
                            >
                                <span className="ms-2">Completed</span>
                                <span className="ms-1 text-xs">({transactionCountStatus.completed})</span>
                            </button>
                        )}
                    </Tab>
                    <Tab as={Fragment}>
                        {({ selected }) => (
                            <button
                                className={`${
                                    selected ? '!border-danger  !outline-none dark:!bg-[#191e3a]' : ''
                                } flex items-center border-t-2 border-transparent bg-[#f6f7f8] p-7 py-3 text-danger before:inline-block hover:border-danger hover:text-danger dark:bg-transparent dark:hover:bg-[#191e3a]`}
                            >
                                <span className="ms-2">Canceled</span>
                                <span className="ms-1 text-xs">({transactionCountStatus.canceled})</span>
                            </button>
                        )}
                    </Tab>
                </Tab.List>
                <Tab.Panels>
                    <Tab.Panel>
                        <div className="pt-5">
                            <TransactionAll fetchDataCountTransaction={fetchDataCountTransaction} />
                        </div>
                    </Tab.Panel>
                    <Tab.Panel>
                        <div className="pt-5">
                            <TransactionPending fetchDataCountTransaction={fetchDataCountTransaction} />
                        </div>
                    </Tab.Panel>
                    <Tab.Panel>
                        <div className="pt-5">
                            <TransactionCompleted />
                        </div>
                    </Tab.Panel>
                    <Tab.Panel>
                        <div className="pt-5">
                            <TransactionCanceled />
                        </div>
                    </Tab.Panel>
                </Tab.Panels>
            </Tab.Group>
        </>
    );
};
export default TransactionsTab;