"use client";
import MaterialButton from "@mui/material/Button";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import { useState } from "react";
import { ThemeProvider } from "@emotion/react";
import turnosXpressTheme from "@core/app/theme/turnosXpress";

export interface TextMonthProps {
    label: string;
    month: number;
    style?: React.CSSProperties;
    setMonth: (m: number) => void;
}

const months = [
    "Enero",
    "Febrero",
    "Marzo",
    "Abril",
    "Mayo",
    "Junio",
    "Julio",
    "Agosto",
    "Septiembre",
    "Octubre",
    "Noviembre",
    "Diciembre",
];

export default function TextMonth(props: TextMonthProps): React.ReactElement {
    const { setMonth, style } = props;

    const [selectedOption, setSelectedOption] = useState<string>(months[0]);

    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
    const open = Boolean(anchorEl);
    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = (e: React.MouseEvent<HTMLElement>) => {
        e.stopPropagation();
        const elemento = e.target as HTMLElement;

        if (elemento.innerHTML == "") {
            setAnchorEl(null);
            return;
        }

        const monthName = elemento.innerHTML;
        const monthIndex = months.indexOf(monthName);

        if (monthIndex < 0) {
            setMonth(1); // +1 because months are 0-indexed
            setSelectedOption(months[0]);
            return;
        }

        setMonth(monthIndex + 1); // +1 because months are 0-indexed
        setSelectedOption(monthName);
        setAnchorEl(null);
    };

    return (
        <>
            <ThemeProvider theme={turnosXpressTheme}>
                <MaterialButton
                    id="demo-customized-button"
                    aria-controls={open ? "dates-range-menu" : undefined}
                    aria-haspopup="true"
                    aria-expanded={open ? "true" : undefined}
                    variant="contained"
                    disableElevation
                    onClick={handleClick}
                    endIcon={<KeyboardArrowDownIcon />}
                    fullWidth
                    sx={{
                        borderRadius: "10px",
                        ...style,
                    }}
                >
                    {selectedOption}
                </MaterialButton>
                <Menu
                    id="dates-range-menu"
                    elevation={0}
                    anchorOrigin={{
                        vertical: "bottom",
                        horizontal: "center",
                    }}
                    transformOrigin={{
                        vertical: "top",
                        horizontal: "center",
                    }}
                    anchorEl={anchorEl}
                    open={open}
                    onClose={handleClose}
                    slotProps={{
                        paper: {
                            sx: {
                                width: style?.width || "200px",
                                boxShadow: "0px 3px 6px rgba(0, 0, 0, 0.2)",
                                borderTopLeftRadius: "0px",
                                borderTopRightRadius: "0px",
                                borderBottomLeftRadius: "10px",
                                borderBottomRightRadius: "10px",
                            },
                        },
                    }}
                >
                    {months.map((month, index) => (
                        <MenuItem key={index} onClick={handleClose} disableRipple>
                            {month}
                        </MenuItem>
                    ))}
                </Menu>
            </ThemeProvider>
        </>
    );
}
