"use client";
import MaterialButton from "@mui/material/Button";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import Divider from "@mui/material/Divider";
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";
import dayjs, { Dayjs } from "dayjs";

export type TextRangeDateWidth = "80%" | "100%" | "custom";

export interface TextRangeDateProps {
    label: string;
    dateFrom: Dayjs;
    dateTo: Dayjs;
    style?: React.CSSProperties;
    setDateFrom: (date: Dayjs) => void;
    setDateTo: (date: Dayjs) => void;
}

enum TEXT_RANGE_DATE_OPTIONS {
    TODAY = "Hoy",
    THIS_WEEK = "Esta Semana",
    THIS_MONTH = "Este Mes",
    THIS_YEAR = "Este Año",
    LAST_7_DAYS = "Ultimos 7 Días",
    LAST_30_DAYS = "Ultimos 30 Días",
    LAST_60_DAYS = "Ultimos 60 Días",
    LAST_90_DAYS = "Ultimos 90 Días",
    LAST_YEAR = "Ultimos 12 Meses",
}

export default function TextRangeDate(props: TextRangeDateProps): React.ReactElement {
    const { setDateFrom, setDateTo, style } = props;

    const [selectedOption, setSelectedOption] = useState<string>(TEXT_RANGE_DATE_OPTIONS.TODAY);

    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;
        }

        if (elemento.innerHTML == TEXT_RANGE_DATE_OPTIONS.TODAY) {
            setDateFrom(dayjs().startOf("day"));
            setDateTo(dayjs().endOf("day"));
        } else if (elemento.innerHTML == TEXT_RANGE_DATE_OPTIONS.THIS_WEEK) {
            setDateFrom(dayjs().startOf("week"));
            setDateTo(dayjs().endOf("week"));
        } else if (elemento.innerHTML == TEXT_RANGE_DATE_OPTIONS.THIS_MONTH) {
            setDateFrom(dayjs().startOf("month"));
            setDateTo(dayjs().endOf("month"));
        } else if (elemento.innerHTML == TEXT_RANGE_DATE_OPTIONS.THIS_YEAR) {
            setDateFrom(dayjs().startOf("year"));
            setDateTo(dayjs().endOf("year"));
        } else if (elemento.innerHTML == TEXT_RANGE_DATE_OPTIONS.LAST_7_DAYS) {
            setDateFrom(dayjs().subtract(7, "day").startOf("day"));
            setDateTo(dayjs().endOf("day"));
        } else if (elemento.innerHTML == TEXT_RANGE_DATE_OPTIONS.LAST_30_DAYS) {
            setDateFrom(dayjs().subtract(30, "day").startOf("day"));
            setDateTo(dayjs().endOf("day"));
        } else if (elemento.innerHTML == TEXT_RANGE_DATE_OPTIONS.LAST_60_DAYS) {
            setDateFrom(dayjs().subtract(60, "day").startOf("day"));
            setDateTo(dayjs().endOf("day"));
        } else if (elemento.innerHTML == TEXT_RANGE_DATE_OPTIONS.LAST_90_DAYS) {
            setDateFrom(dayjs().subtract(90, "day").startOf("day"));
            setDateTo(dayjs().endOf("day"));
        } else if (elemento.innerHTML == TEXT_RANGE_DATE_OPTIONS.LAST_YEAR) {
            setDateFrom(dayjs().subtract(1, "year").startOf("day"));
            setDateTo(dayjs().endOf("day"));
        }

        setSelectedOption(elemento.innerHTML);
        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: {
                                minWidth: "200px",
                                width: "90%",
                                boxShadow: "0px 3px 6px rgba(0, 0, 0, 0.2)",
                                borderTopLeftRadius: "0px",
                                borderTopRightRadius: "0px",
                                borderBottomLeftRadius: "10px",
                                borderBottomRightRadius: "10px",
                            },
                        },
                    }}
                >
                    <MenuItem onClick={handleClose} disableRipple>
                        {TEXT_RANGE_DATE_OPTIONS.TODAY}
                    </MenuItem>
                    <MenuItem onClick={handleClose} disableRipple>
                        {TEXT_RANGE_DATE_OPTIONS.THIS_WEEK}
                    </MenuItem>
                    <MenuItem onClick={handleClose} disableRipple>
                        {TEXT_RANGE_DATE_OPTIONS.THIS_MONTH}
                    </MenuItem>
                    <MenuItem onClick={handleClose} disableRipple>
                        {TEXT_RANGE_DATE_OPTIONS.THIS_YEAR}
                    </MenuItem>
                    <Divider sx={{ my: 0.5 }} />
                    <MenuItem onClick={handleClose} disableRipple>
                        {TEXT_RANGE_DATE_OPTIONS.LAST_7_DAYS}
                    </MenuItem>
                    <MenuItem onClick={handleClose} disableRipple>
                        {TEXT_RANGE_DATE_OPTIONS.LAST_30_DAYS}
                    </MenuItem>
                    <MenuItem onClick={handleClose} disableRipple>
                        {TEXT_RANGE_DATE_OPTIONS.LAST_60_DAYS}
                    </MenuItem>
                    <MenuItem onClick={handleClose} disableRipple>
                        {TEXT_RANGE_DATE_OPTIONS.LAST_90_DAYS}
                    </MenuItem>
                    <MenuItem onClick={handleClose} disableRipple>
                        {TEXT_RANGE_DATE_OPTIONS.LAST_YEAR}
                    </MenuItem>
                </Menu>
            </ThemeProvider>
        </>
    );
}
