import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Divider, IconButton, Popover, Stack, Typography, } from '@mui/material';
import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
import { format } from 'date-fns';
import es from 'date-fns/locale/es';
import { getCurrentLocale } from '../../../../../utils/languages';
const MonthPickerPopover = ({ anchorEl, open, onClose, selectedDate, onMonthSelect, onCurrentMonthClick, }) => {
    const { t } = useTranslation('material_hu_only');
    const [displayYear, setDisplayYear] = useState(selectedDate.getFullYear());
    useEffect(() => {
        if (open)
            setDisplayYear(selectedDate.getFullYear());
    }, [open, selectedDate]);
    const locale = getCurrentLocale() || es;
    const monthNames = Array.from({ length: 12 }, (_, i) => format(new Date(displayYear, i, 1), 'MMM', { locale }));
    const selectedYear = selectedDate.getFullYear();
    const selectedMonth = selectedDate.getMonth();
    const handleMonthClick = (monthIndex) => {
        onMonthSelect(new Date(displayYear, monthIndex, 1));
        onClose();
    };
    const handleCurrentMonthClick = () => {
        onCurrentMonthClick?.();
        const today = new Date();
        onMonthSelect(new Date(today.getFullYear(), today.getMonth(), 1));
        onClose();
    };
    return (_jsx(Popover, { open: open, anchorEl: anchorEl, onClose: onClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }, children: _jsxs(Stack, { sx: {
                width: 260,
                backgroundColor: ({ palette }) => palette.new.background.elements.default,
            }, children: [_jsxs(Stack, { sx: { p: 2 }, children: [_jsxs(Stack, { sx: {
                                alignItems: 'center',
                                flexDirection: 'row',
                                justifyContent: 'space-between',
                                mb: 1.5,
                            }, children: [_jsx(IconButton, { "aria-label": t('date_period_selector.previous'), onClick: () => setDisplayYear(y => y - 1), sx: { p: 0.5 }, children: _jsx(IconChevronLeft, { size: 20 }) }), _jsx(Typography, { variant: "globalS", fontWeight: 600, children: displayYear }), _jsx(IconButton, { "aria-label": t('date_period_selector.next'), onClick: () => setDisplayYear(y => y + 1), sx: { p: 0.5 }, children: _jsx(IconChevronRight, { size: 20 }) })] }), _jsx(Stack, { sx: {
                                display: 'grid',
                                gridTemplateColumns: 'repeat(4, 1fr)',
                                gap: 0.5,
                            }, children: monthNames.map((name, index) => (_jsx(Button, { variant: displayYear === selectedYear && index === selectedMonth
                                    ? 'primary'
                                    : 'tertiary', onClick: () => handleMonthClick(index), sx: {
                                    fontSize: 13,
                                    px: 0.5,
                                    py: 1,
                                    minWidth: 0,
                                    textTransform: 'capitalize',
                                }, children: name }, index))) })] }), _jsx(Divider, {}), _jsx(Stack, { sx: { alignItems: 'center', p: 1 }, children: _jsx(Button, { variant: "tertiary", onClick: handleCurrentMonthClick, children: t('date_period_selector.current_month') }) })] }) }));
};
export default MonthPickerPopover;
