import Button from "@mui/material/Button";
import FilterByIcon from "../../assets/images/FilterByIcon.svg";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import CheckIcon from "../../assets/images/CheckIcon.svg";
import React, {useState} from "react";

export default function SelectProperty({properties, selectedProperties, handleChangePropertyStatus}) {

    const [anchorEl, setAnchorEl] = useState(null);
    const open = Boolean(anchorEl);
    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };

    return (
        <div>
            <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 ? 'propertyMenu' : undefined}
                aria-haspopup="true"
                aria-expanded={open ? 'true' : undefined}
                onClick={handleClick}
            >
                <img alt={''} src={FilterByIcon} className={'ml-3'}/>
                انتخاب ویژگی
            </Button>
            <Menu
                id="propertyMenu"
                aria-labelledby="propertyMenu"
                anchorEl={anchorEl}
                open={open}
                onClose={handleClose}
                anchorOrigin={{
                    vertical: 'bottom',
                    horizontal: 'left',
                }}
                transformOrigin={{
                    vertical: 'top',
                    horizontal: 'center',
                }}
            >
                {
                    properties.map((property) => (
                        <MenuItem
                            divider={true}
                            sx={{
                                display: 'flex',
                                flexDirection: 'row-reverse',
                                justifyContent: 'end',
                                minWidth: '10rem'
                            }}
                            key={property.id}
                            value={property.id}
                            onClick={() => handleChangePropertyStatus(property)}
                        >
                                <span style={{
                                    textAlign: 'right',
                                    fontFamily: 'Vazirmatn',
                                    color: '#1e1e1e'
                                }}>
                                    <div className={'flex flex-row-reverse items-center justify-center'}>
                                        {selectedProperties.filter((prop) => prop.id === property.id).length === 1 ? <img className={'ml-2'} alt={''} src={CheckIcon}/> : null}
                                        {property.title}
                                    </div>
                                </span>
                        </MenuItem>
                    ))
                }
            </Menu>
        </div>
    )
}