"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, useEffect } from "react";
import { ThemeProvider } from "@emotion/react";
import turnosXpressTheme from "@core/app/theme/turnosXpress";

export interface IOption {
    id: string | number;
    text: string;
}

export interface TextSelectProps {
    label: string;
    selectedValue: string | number;
    data: IOption[];
    style?: React.CSSProperties;
    setSelectedValue: (m: string | number) => void;
}

export default function TextSelect(props: TextSelectProps): React.ReactElement {
    const { setSelectedValue, style, data, selectedValue } = props;

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

    useEffect(() => {
        const option = data.find((d) => d.id === selectedValue);
        if (option) {
            setSelectedOption(option.text);
        }
    }, [selectedValue, data]);

    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 optionText = elemento.innerHTML;
        const selected = data.find((d) => d.text === optionText);

        if (!selected) {
            return;
        }

        setSelectedValue(selected.id);
        setSelectedOption(selected.text);
        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",
                            },
                        },
                    }}
                >
                    {data.map((option, index) => (
                        <MenuItem key={index} onClick={handleClose} disableRipple>
                            {option.text}
                        </MenuItem>
                    ))}
                </Menu>
            </ThemeProvider>
        </>
    );
}
