import {useTheme} from '@mui/material/styles';
import Box from '@mui/material/Box';
import OutlinedInput from '@mui/material/OutlinedInput';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import Chip from '@mui/material/Chip';
import {useEffect, useState} from "react";

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, personName, theme) {
    return {
        fontWeight:
            personName.indexOf(name) === -1
                ? theme.typography.fontWeightRegular
                : theme.typography.fontWeightMedium,
    };
}

const SelectBoxMultiple = ({formik, id, defaultValue}) => {
    const theme = useTheme();
    const [personName, setPersonName] = useState(defaultValue || []);

    useEffect(() => {
        defaultValue.forEach((value, index) => {
            formik.setFieldValue(`${id}[${index}]`, value || '');
        });

    }, []);

    const handleChange = (event) => {
        const {
            target: {value},
        } = event;

        const selectedValues = typeof value === 'string' ? value.split(',').filter(item => item.trim() !== '') : value;

        formik.setFieldValue(id, []);

        if (selectedValues.length === 0) {
            setPersonName([]);
            formik.setFieldValue(id, []);
        } else {
            setPersonName(selectedValues);
            selectedValues.forEach((selectedValue, index) => {
                formik.setFieldValue(`${id}[${index}]`, selectedValue);
            });
        }
    };

    return (
        <>
            <FormControl sx={{width: '100%'}}>
                <InputLabel id={id}>انتخاب</InputLabel>
                <Select
                    id={id}
                    multiple
                    value={personName}
                    onChange={handleChange}
                    input={<OutlinedInput label="Chip"/>}
                    renderValue={(selected) => (
                        <Box sx={{display: 'flex', flexWrap: 'wrap', gap: 0.5}}>
                            {selected.map((value) => (
                                <Chip key={value} label={value}/>
                            ))}
                        </Box>
                    )}
                    MenuProps={MenuProps}
                    sx={{
                        "&.MuiSelect-select": {
                            minWidth: 0,
                            maxWidth: '100%',
                            overflow: 'hidden',
                        },
                    }}
                >
                    {names.map((name) => (
                        <MenuItem
                            key={name}
                            value={name}
                            style={getStyles(name, personName, theme)}
                        >
                            {name}
                        </MenuItem>
                    ))}
                </Select>
            </FormControl>
        </>
    );
};

export default SelectBoxMultiple;
