import { Popper, Paper, List, ListItem, ListItemText, ClickAwayListener } from '@mui/material';

function FilterBox({anchorEl , open = false, handleClose = () => {} , columnFilterModeOptions , onSelectFilter , defaultFilter}) {

    const id = open ? 'simple-popper' : undefined;
    const handleSelectFilter = (filterFn) => {
        onSelectFilter(filterFn);
        handleClose();
    };

    return (
        <div>
            <Popper id={id} open={open} anchorEl={anchorEl} placement="bottom" style={{ zIndex: 1301 }}>
                <ClickAwayListener onClickAway={handleClose}>
                    <Paper>
                        <List>
                            {columnFilterModeOptions.map((option, index) => (
                                <ListItem key={index}  onClick={() => handleSelectFilter(option)} selected={option === defaultFilter}  sx={{ cursor: 'pointer' }}>
                                    <ListItemText primary={option} />
                                </ListItem>
                            ))}
                        </List>
                    </Paper>
                </ClickAwayListener>
            </Popper>
        </div>
    );
}

export default FilterBox;