'use client';

import { Card, Icon, Wallet2 } from 'iconsax-react';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { useGetPaymentMethod } from '../../hooks/useOrderData';
import { useCheckoutStore } from '../../store/Store';

type PaymentSectionProps = {
    paymentType: string;
    onPaymentTypeChange: (id: string) => void;
};

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const getIconByMethod = (method: "CardOnDelivery" | "Cash" | "Online", _gateway: string | null): Icon => {
    if (method === "Online" || method === "CardOnDelivery") {
        return Card;
    }
    if (method === "Cash") {
        return Wallet2;
    }
    return Card;
};

export const PaymentSection = ({ paymentType, onPaymentTypeChange }: PaymentSectionProps) => {

    const { t: tOrderDetail } = useTranslation('parallels', { keyPrefix: 'OrderDetail' });
    const { t: tOrders } = useTranslation('orders');
    const { data: paymentMethod } = useGetPaymentMethod();
    const { setIsSelectedPayment } = useCheckoutStore();

    const getPaymentMethodTranslation = useCallback((method: string, fallbackTitle: string) => {
        const translationKey = `paymentMethod.${method}`;
        const translation = tOrders(translationKey);
        return translation !== translationKey ? translation : fallbackTitle;
    }, [tOrders]);

    const paymentOptions = useMemo(() => {
        if (!paymentMethod?.data) return [];

        return paymentMethod.data
            .filter(item => item.enabled)
            .sort((a, b) => a.order - b.order)
            .map(item => ({
                id: item.id,
                label: getPaymentMethodTranslation(item.method, item.title),
                icon: getIconByMethod(item.method, item.gateway),
            }));
    }, [paymentMethod, getPaymentMethodTranslation]);

    return (
        <section className="bg-container rounded-container box-shadow-normal p-4">
            <div className="py-3">
                <h3 className="text-sm2 font-medium leading-5">{tOrderDetail("SectionPayment.Title")}</h3>

                <RadioGroup
                    value={paymentType}
                    onValueChange={(value) => {
                        onPaymentTypeChange(value);
                        setIsSelectedPayment(true);
                    }}
                    className='flex flex-col gap-6 mt-6'
                >
                    {paymentOptions.map(({ id, label, icon: Icon }) => (
                        <div key={id} className='flex items-center justify-between'>
                            <RadioGroupItem value={id} id={`paymentMethod${id}`} />
                            <label className='flex items-center gap-2 cursor-pointer' htmlFor={`paymentMethod${id}`}>
                                <span className='text-xs mt-0.5'>{label}</span>
                                <Icon
                                    size={16}
                                    color='currentColor'
                                    className='mr-2'
                                />
                            </label>
                        </div>
                    ))}
                </RadioGroup>
            </div>
        </section>
    );
};

