import { ExpandMore } from '@mui/icons-material';
import { Box, FormControl, InputLabel, MenuItem, Select as MuiSelect, SelectProps as MuiSelectProps, SelectChangeEvent } from '@mui/material';
import React, { useState } from 'react';
import './select.scss';

export interface ISelectOption {
    label: string;
    value: string;
}

export interface SelectProps extends MuiSelectProps {
    label?: string,
    name?: string,
    width?: string,
    value?: string,
    options: ISelectOption[],
    onOptionChange?: (value: string) => void;
}

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
    PaperProps: {
        style: {
            maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
        },
    },
};

export const Select = ({ width, value, onOptionChange, label, size, name, options, disabled, variant, readOnly, color, defaultOpen, ...rest }: SelectProps) => {
    const [selectedOption, setSelectedOption] = React.useState(value ? value as string : '');
    const [isClicked, setIsClicked] = useState(false);

    const handleClick = () => {
        setIsClicked(true);
    }

    const handleBlur = () => {
        setIsClicked(false);
    }
    const handleChange = (event: SelectChangeEvent) => {
        setSelectedOption(event.target.value);
        if (onOptionChange) {
            onOptionChange(event.target.value);
        }
    };

    return (
        <div className={`select-containter ${isClicked ? 'clicked' : ''}`}>
        <Box className="select-containter" sx={{ width: width }}>
            <FormControl fullWidth>
                <InputLabel id="select-input-label">{label}</InputLabel>
                <MuiSelect
                    labelId="select-label-id"
                    id="simple-select"
                    value={selectedOption}
                    onFocus={handleClick}
                    onBlur={handleBlur}
                    variant={variant}
                    color={color}
                    disabled={disabled}
                    readOnly={readOnly}
                    defaultOpen={defaultOpen}
                    label={label}
                    size={size}
                    MenuProps={{
                        anchorOrigin: {
                            vertical: "bottom",
                            horizontal: "left",
                        },
                        transformOrigin: {
                            vertical: "top",
                            horizontal: "left",
                        },
                    }}
                    onChange={handleChange}
                    IconComponent={ExpandMore}
                >
                    {options?.map((option) => (
                        <MenuItem key={option.label} value={option.value}>
                            {option.label}
                        </MenuItem>
                    ))}
                </MuiSelect>
            </FormControl>
        </Box>
</div>
    );
}