import { useTheme } from '@emotion/react';
import { Close, ExpandMore } from '@mui/icons-material';
import { Box, Checkbox, Chip, FormControl, InputLabel, ListItemText, MenuItem, Select as MuiSelect, SelectProps as MuiSelectProps, OutlinedInput, SelectChangeEvent, Theme } from '@mui/material';
import _without from "lodash/without";
import React from 'react';
import './mulitSelect.css';


export interface SelectProps extends MuiSelectProps {
    label?: string,
    name?: string,
    height?: string,
    width?: string,
    options: string[],
    defaultValue?: string[]
}

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

const names = [
    'Oliver Hansen',
    'Van Henry',
    'April Tucker',
    'Ralph Hubbard',
    'Omar Alexander',
    'Carlos Abbott',
    'Miriam Wagner',
    'Bradley Wilkerson',
    'Virginia Andrews',
    'Kelly Snyder',
];

function getStyles(name: string, personName: readonly string[], theme: Theme) {
    return {
        fontWeight:
            personName.indexOf(name) === -1
                ? theme.typography.fontWeightRegular
                : theme.typography.fontWeightMedium,
    };
}

export const MultiSelect = ({ width, height, size, label, name, value, defaultValue,  options, variant, color,...rest }: SelectProps) => {
    const theme = useTheme();
    const [personName, setPersonName] = React.useState<string[]>(defaultValue ? defaultValue : []);

    const handleDelete = (e: React.MouseEvent, value: string) => {
        e.preventDefault();
        setPersonName((current) => _without(current, value));

    };

    const handleChange = (event: SelectChangeEvent<typeof personName>) => {
        const {
            target: { value },
        } = event;
        setPersonName(
            // On autofill we get a stringified value.
            typeof value === 'string' ? value.split(',') : value,
        );
        console.log('value - ', value);
        console.log('person name - ', personName);
    };

    return (
        <div>
            <FormControl sx={{ width: width }}>
                <InputLabel>{label}</InputLabel>
                <MuiSelect className="storybook-select"
                    multiple
                    value={personName}
                    color={color}
                    onChange={handleChange}
                    IconComponent={ExpandMore}
                    size = {size}
                    variant={variant}
                    input={<OutlinedInput id="select-multiple-chip" label={label} />}
                    renderValue={(selected) => (
                        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
                            {(selected).map((value) => (
                                <Chip
                                    className="storybook-chip"
                                    key={value}
                                    label={value}
                                    deleteIcon={
                                        <Close className="storybook-icon-close"
                                            onMouseDown={(event) => event.stopPropagation()}
                                        />
                                    }
                                    onDelete={(e) => handleDelete(e, value)}
                                />
                            ))}
                        </Box>
                    )}
                    MenuProps={MenuProps}
                >
                    {names.map((name) => (
                        <MenuItem key={name} value={name}>
                            <Checkbox checked={personName.indexOf(name) > -1} />
                            <ListItemText primary={name} />
                        </MenuItem>

                    ))}
                </MuiSelect>
            </FormControl>
        </div>
    );
}