import React, {useState} from 'react'
import PropTypes from 'prop-types'
import {MenuItem, withStyles, Menu, Button} from '@material-ui/core'
import {uniq} from 'lodash'

const StyledMenu = withStyles({
  paper: {
    border: '1px solid #d3d4d5'
  }
})(props => (
  <Menu
    elevation={0}
    getContentAnchorEl={null}
    anchorOrigin={{
      vertical: 'top',
      horizontal: 'center'
    }}
    transformOrigin={{
      vertical: 'bottom',
      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 AjouteTradiksyon({chwaLang, setChwaLang}) {
  const [anchorElement, setAnchorElement] = useState(null)

  const handleClick = event => {
    setAnchorElement(event.currentTarget)
  }

  const handleClose = event => {
    setAnchorElement(null)
    const chwaInik = uniq([...chwaLang, event.currentTarget.id])
    setChwaLang(chwaInik.filter(c => c !== ''))
  }

  return (
    <div style={{textAlign: 'center', marginTop: 5}}>
      <Button
        aria-controls='lang-menu'
        variant='outlined'
        aria-haspopup='true'
        onClick={handleClick}
      >
        Ajouter une traduction &#127467;&#127479; &#127468;&#127463; &#127466;&#127480;
      </Button>
      <StyledMenu
        keepMounted
        id='lang-menu'
        anchorEl={anchorElement}
        open={Boolean(anchorElement)}
        onClose={handleClose}
      >
        <StyledMenuItem id='fr' onClick={handleClose}>&#127467;&#127479; Français</StyledMenuItem>
        <StyledMenuItem id='en' onClick={handleClose}>&#127468;&#127463; English</StyledMenuItem>
        <StyledMenuItem id='es' onClick={handleClose}>&#127466;&#127480; Español</StyledMenuItem>
      </StyledMenu>
    </div>
  )
}

AjouteTradiksyon.propTypes = {
  chwaLang: PropTypes.array.isRequired,
  setChwaLang: PropTypes.func.isRequired
}

export default AjouteTradiksyon