import React from 'react'
import { withStyles } from '@material-ui/core/styles'
import Button from '@material-ui/core/Button'
import Menu from '@material-ui/core/Menu'
import MenuItem from '@material-ui/core/MenuItem'
import ListItemIcon from '@material-ui/core/ListItemIcon'
import ListItemText from '@material-ui/core/ListItemText'
import InboxIcon from '@material-ui/icons/MoveToInbox'
import DraftsIcon from '@material-ui/icons/Drafts'
import SendIcon from '@material-ui/icons/Send'
import MoreHorizIcon from '@material-ui/icons/MoreHoriz'
import { Icon, Fab } from '@material-ui/core'

const StyledMenu = withStyles({
    paper: {
        border: '1px solid #d3d4d5',
    },
})((props) => (
    <Menu
        elevation={0}
        getContentAnchorEl={null}
        anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'center',
        }}
        transformOrigin={{
            vertical: 'top',
            horizontal: 'center',
        }}
        {...props}
    />
))

const StyledMenuItem = withStyles((theme) => ({
    root: {
        '&:focus': {
            backgroundColor: theme.palette.primary.main,
            '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
                color: theme.palette.common.white,
            },
        },
    },
}))(MenuItem)

function CustomizedMenu(props) {
    const { item, columnId, columns, handleDeleteJob, handleUpdateJob } = props
    const [anchorEl, setAnchorEl] = React.useState(null)

    function handleClick(event) {
        setAnchorEl(event.currentTarget)
    }

    function handleClose() {
        setAnchorEl(null)
    }

    return (
        <div>
            <MoreHorizIcon
                aria-owns={anchorEl ? 'simple-menu' : undefined}
                style={{ backgroundColor: ' none' }}
                onClick={handleClick}
            />
            <StyledMenu
                id="simple-menu"
                anchorEl={anchorEl}
                open={Boolean(anchorEl)}
                onClose={handleClose}
            >
                <StyledMenuItem>
                    <ListItemText
                        primary="Xóa"
                        onClick={() => handleDeleteJob(item, columnId, columns)}
                    />
                </StyledMenuItem>
                <StyledMenuItem>
                    <ListItemText
                        primary="Sửa"
                        onClick={() => handleUpdateJob(item, columnId, columns)}
                    />
                </StyledMenuItem>
                <StyledMenuItem>
                    <ListItemText primary="Thêm" />
                </StyledMenuItem>
            </StyledMenu>
        </div>
    )
}

export default CustomizedMenu
