import { ListBox, Select } from '@heroui/react';
import { usePeriodeStore } from '@/store/usePeriodeStore';

const BULAN = [
    'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
    'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember',
];

export function PeriodeSelect() {
    const { bulan, tahun, setPeriode } = usePeriodeStore();

    const bulanItems = BULAN.map((label, i) => ({ id: i + 1, label }));
    const tahunItems = Array.from({ length: 5 }, (_, i) => tahun - 2 + i).map((y) => ({ id: y, label: String(y) }));

    return (
        <div className="flex items-center gap-2">
            <Select
                selectedKey={bulan}
                onSelectionChange={(key: any) => setPeriode(Number(key), tahun)}
                items={bulanItems as any}
                className="w-36"
            >
                <Select.Trigger>
                    <Select.Value>{({ selectedItem }: any) => selectedItem?.label}</Select.Value>
                    <Select.Indicator />
                </Select.Trigger>
                <Select.Popover>
                    <ListBox items={bulanItems}>
                        {(item) => <ListBox.Item id={item.id}>{item.label}</ListBox.Item>}
                    </ListBox>
                </Select.Popover>
            </Select>
            <Select
                selectedKey={tahun}
                onSelectionChange={(key: any) => setPeriode(bulan, Number(key))}
                items={tahunItems as any}
                className="w-24"
            >
                <Select.Trigger>
                    <Select.Value>{({ selectedItem }: any) => selectedItem?.label}</Select.Value>
                    <Select.Indicator />
                </Select.Trigger>
                <Select.Popover>
                    <ListBox items={tahunItems}>
                        {(item) => <ListBox.Item id={item.id}>{item.label}</ListBox.Item>}
                    </ListBox>
                </Select.Popover>
            </Select>
        </div>
    );
}