import React, {useState} from 'react';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import FilterByIcon from '../../assets/images/FilterByIcon.svg'
export default function FilterBy({onAddFilter}) {
    const [anchorEl, setAnchorEl] = useState(null);
    const open = Boolean(anchorEl);
    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };

    return (
        <div className="hidden">
            <Button
                variant={'outlined'}
                sx={{fontWeight: '300', letterSpacing: '-0.025em', height: '2.6rem', borderRadius: '8px', fontFamily: 'Vazirmatn', borderColor: '#1e1e1e', color: '#1e1e1e', ':hover':{backgroundColor: 'white', borderColor: '#1e1e1e'}}}
                aria-controls={open ? 'filterMenu' : undefined}
                aria-haspopup="true"
                aria-expanded={open ? 'true' : undefined}
                onClick={handleClick}
            >
                <img alt={''} src={FilterByIcon} className={'ml-3'}/>
                فیلتر
            </Button>
            <Menu
                id="filterMenu"
                aria-labelledby="filterMenu"
                anchorEl={anchorEl}
                open={open}
                onClose={handleClose}
                anchorOrigin={{
                    vertical: 'bottom',
                    horizontal: 'left',
                }}
                transformOrigin={{
                    vertical: 'top',
                    horizontal: 'center',
                }}
            >
                <MenuItem sx={{fontFamily: 'Vazirmatn', color: '#1e1e1e', display: 'flex', justifyContent: 'end'}} onClick={() => onAddFilter('پرفروش ترین')}>پرفروش ترین</MenuItem>
                <MenuItem sx={{fontFamily: 'Vazirmatn', color: '#1e1e1e', display: 'flex', justifyContent: 'end'}} onClick={() => onAddFilter('پربازدید ترین')}>پربازدید ترین</MenuItem>
                <MenuItem sx={{fontFamily: 'Vazirmatn', color: '#1e1e1e', display: 'flex', justifyContent: 'end'}} onClick={() => onAddFilter('پرمحصول ترین')}>پرمحصول ترین</MenuItem>
            </Menu>
        </div>
    );
}