import React, { useEffect, useState } from 'react';
import {
    PieChart,
    Pie,
    Cell,
    ResponsiveContainer,
} from 'recharts';
import { apiConfig } from '@/config/api.config';
import { useCallApi } from '@/hooks';

const API_URL = apiConfig.api_dashboard;

interface Props {
    startdate: string;
    enddate: string;
}

const TransactionPieChart = ({ startdate, enddate }: Props) => {

    const { GetData } = useCallApi();
        const [responseTransactionValue, setResponseTransactionValue] = useState<any>(null);
    
        useEffect(() => {
            const fetchDataTransactionValue = async () => {
                try {
                    const res = await GetData(`${API_URL}/transaction-chart`, {
                        date_from: startdate,
                        date_to: enddate,
                    });
                    setResponseTransactionValue(res);
                } catch (error) {
                    console.error('Error fetching transaction value:', error);
                }
            };
    
            fetchDataTransactionValue();
        }, [startdate, enddate, GetData]);

        const data = [
            { name: 'Transfer', value: parseFloat((responseTransactionValue?.data?.T ?? 0).toFixed(2)), color: '#3490dc' },
            { name: 'Return', value: parseFloat((responseTransactionValue?.data?.R ?? 0).toFixed(2)), color: '#a0aec0' },
            { name: 'Topup', value: parseFloat((responseTransactionValue?.data?.U ?? 0).toFixed(2)), color: '#9f7aea' },
            { name: 'Purchase', value: parseFloat((responseTransactionValue?.data?.P ?? 0).toFixed(2)), color: '#baf7c5' },
            { name: 'Withdraw', value: parseFloat((responseTransactionValue?.data?.W ?? 0).toFixed(2)), color: '#f56565' },
            { name: 'Top Up Partner', value: parseFloat((responseTransactionValue?.data?.N ?? 0).toFixed(2)), color: '#f7fa52' },
        ];        

    return (
        <div className="bg-white rounded-lg shadow-md p-6 w-full max-w-md">
            <div className="flex justify-between items-center mb-4">
                <h2 className="text-lg font-semibold text-gray-700">Transaction Chart</h2>
            </div>

            <div className="flex items-center space-x-6">
                <div className="w-40 h-40">
                    <ResponsiveContainer width="100%" height="100%">
                        <PieChart>
                            <Pie
                                data={data}
                                dataKey="value"
                                innerRadius={40}
                                outerRadius={60}
                                paddingAngle={3}
                            >
                                {data.map((entry, index) => (
                                    <Cell key={`cell-${index}`} fill={entry.color} />
                                ))}
                            </Pie>
                        </PieChart>
                    </ResponsiveContainer>
                </div>

                <div className="text-sm space-y-2">
                    <div className="font-semibold text-gray-500">Active Transaction</div>
                    {data.map((entry, index) => (
                        <div key={index} className="flex items-center justify-between w-48">
                            <div className="flex items-center">
                                <div className="w-3 h-3 rounded-full mr-2" style={{ backgroundColor: entry.color }}></div>
                                <span className="text-gray-700">{entry.name}</span>
                            </div>
                            <span className="text-gray-700">{entry.value}%</span>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
};

export default TransactionPieChart;
