'use client';

import Combobox from '@/components/combobox/Combobox';
import { Box, Location, Car, Building } from 'iconsax-react';
import { useTranslation } from 'react-i18next';
import { useGetShipmentMethod } from '../../hooks/useOrderData';
import { DeliveryMethod } from '../../types/Types';
import { useCheckoutStore } from '../../store/Store';
import { glassSurfaceCard } from '@/lib/styles/glassSurface';

type ShippingSectionProps = {
    deliveryType: string;
    onDeliveryTypeChange: (id: string) => void;
};

export const ShippingSection = ({ deliveryType, onDeliveryTypeChange }: ShippingSectionProps) => {

    const { t: tOrderDetail } = useTranslation('parallels', { keyPrefix: 'OrderDetail' });
    const { t: tOrders } = useTranslation('orders');
    const { data: shipmentMethod } = useGetShipmentMethod();
    const { setIsSelectedShipment } = useCheckoutStore();

    const getDeliveryMethodTranslation = (method: string) => {
        const translationKey = method === 'pickup' ? 'customerPickup' : method;
        return tOrders(`deliveryMethod.${translationKey}`);
    };

    const getDeliveryMethodIcon = (method: string) => {
        switch (method) {
            case 'dineIn':
                return Building;
            case 'pickup':
                return Location;
            case 'deliveryCar':
                return Car;
            case 'deliveryCourier':
                return undefined;
            default:
                return Box;
        }
    };

    const getDeliveryMethodImage = (method: string) => {
        if (method === 'deliveryCourier') {
            return '/assets/images/fast-delivery.svg';
        }
        return undefined;
    };

    const options = shipmentMethod?.data
        .filter((item: DeliveryMethod) => item.enabled)
        .sort((a: DeliveryMethod, b: DeliveryMethod) => a.order - b.order)
        .map((item: DeliveryMethod) => ({
            id: item.id,
            title: getDeliveryMethodTranslation(item.method),
            icon: getDeliveryMethodIcon(item.method),
            imagePath: getDeliveryMethodImage(item.method)
        })) || [];

    return (
        <section className={glassSurfaceCard('p-4')}>
            <div className="py-3">
                <h3 className="text-sm2 font-medium leading-5">{tOrderDetail("SectionShipping.Title")}</h3>
                <Combobox
                    className='relative mt-6'
                    icon={Box}
                    title=''
                    placeholder={'انتخاب روش تحویل'}
                    searchable={false}
                    options={options}
                    selectedId={deliveryType}
                    onSelectionChange={(e, i) => {
                        const selectedOption = options[i];
                        if (selectedOption) {
                            onDeliveryTypeChange(selectedOption.id);
                            setIsSelectedShipment(true);
                        }
                    }}
                />
            </div>
        </section>
    );
};
