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



export interface OptionsData {
    label: string;
    value: number | string;
    chipColor?: "red" | "orange" | "green" | "blue" | "purple" | "pink" | "oliveGreen";
}


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

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

export const SelectChip = ({ width, onOptionChange, value, label, size, name, options, disabled, variant, readOnly, color, defaultOpen, ...rest }: SelectProps) => {
    const selectedVal = typeof value === 'object' ? value?.value : value;
    let selectedObj = value;
    if (typeof value !== 'object') {
        selectedObj = options.find((op: OptionsData) => op.value === value) as OptionsData;
    }

    const [selectedOption, setSelectedOption] = React.useState<OptionsData>(selectedObj as OptionsData || {});
    // const [selectedValue, setSelectedValue] = React.useState(selectedVal);

    const handleChange = (event : SelectChangeEvent<OptionsData>) => {
        // setSelectedValue(event.target.value);
        const selectedItem = options.find((op: OptionsData) => op.value === event.target.value);
        setSelectedOption(selectedItem as OptionsData);
        if (onOptionChange) {
            onOptionChange(selectedItem as OptionsData);
        }
    };

    return (
        <div className='select-chip'>
            <FormControl fullWidth>
                <InputLabel id="select-input-label">{label}</InputLabel>
                <MuiSelect
                    labelId="select-label-id"
                    id="simple-select-chip"
                    value={selectedOption}
                    variant={variant}
                    color={color}
                    disabled={disabled}
                    readOnly={readOnly}
                    defaultOpen={defaultOpen}
                    IconComponent={ExpandMore}
                    label={label}
                    size={size}
                    onChange={handleChange}
                    renderValue={(value) => (
                        <Box>
                            <Chip
                                className={'select-chip-' + value?.chipColor}
                                label={value?.label}
                            />
                        </Box>
                    )}
                >
                    {options?.map((option) => (
                        <MenuItem key={option.label} value={option.value} className={`${option.value == selectedOption.value ? 'selected-item' : ''}`}>
                            {option.label}
                        </MenuItem>
                    ))}
                </MuiSelect>
            </FormControl>
        </div>
    );
}