import {useState} from 'react'
import {styled} from '@mui/material/styles'
import PropTypes from 'prop-types'
import {MenuItem, Menu, Button} from '@mui/material'
import {uniq} from 'lodash'

import OtomatikSwitch from './otomatik-switch'

const PREFIX = 'AjouteTradiksyon'

const classes = {
  paper: `${PREFIX}-paper`,
  root: `${PREFIX}-root`
}

const Root = styled('div')((
  {
    theme
  }
) => ({
  [`& .${classes.paper}`]: {
    border: '1px solid #d3d4d5'
  },

  [`& .${classes.root}`]: {
    '&:focus': {
      backgroundColor: theme.palette.primary.main,
      '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
        color: theme.palette.common.white
      }
    }
  }
}))

function StyledMenu(props) {
  return (
    <Menu
      elevation={0}
      anchorOrigin={{
        vertical: 'top',
        horizontal: 'center'
      }}
      transformOrigin={{
        vertical: 'bottom',
        horizontal: 'center'
      }}
      {...props}
    />
  )
}

const StyledMenuItem = MenuItem

function AjouteTradiksyon({hideSwitch, disableSwitch, tradiksyonOtomatik, setTradiksyonOtomatik, canAutoTranslate, 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 (
    <>
      {canAutoTranslate && !hideSwitch && (
        <OtomatikSwitch tradiksyonOtomatik={tradiksyonOtomatik} setTradiksyonOtomatik={setTradiksyonOtomatik} disabled={!chwaLang.includes('fr') || disableSwitch} />
      )}
      <Root style={{textAlign: 'center', marginTop: 20}}>
        <Button
          aria-controls='lang-menu'
          variant='outlined'
          aria-haspopup='true'
          onClick={handleClick}
        >
          Ajouter une traduction <br /> 🇫🇷 🇬🇧 🇪🇸 🇩🇪 🇮🇹
        </Button>
        <StyledMenu
          keepMounted
          id='lang-menu'
          anchorEl={anchorElement}
          open={Boolean(anchorElement)}
          classes={{
            paper: classes.paper
          }}
          onClose={handleClose}
        >
          <StyledMenuItem
            id='fr'
            classes={{
              root: classes.root
            }}
            onClick={handleClose}
          >🇫🇷 Français</StyledMenuItem>
          <StyledMenuItem
            id='en'
            classes={{
              root: classes.root
            }}
            onClick={handleClose}
          >🇬🇧 English</StyledMenuItem>
          <StyledMenuItem
            id='es'
            classes={{
              root: classes.root
            }}
            onClick={handleClose}
          >🇪🇸 Español</StyledMenuItem>
          <StyledMenuItem
            id='de'
            classes={{
              root: classes.root
            }}
            onClick={handleClose}
          >🇩🇪 Deutsch</StyledMenuItem>
          <StyledMenuItem
            id='it'
            classes={{
              root: classes.root
            }}
            onClick={handleClose}
          >🇮🇹 Italiano</StyledMenuItem>
        </StyledMenu>
      </Root>
    </>
  )
}

AjouteTradiksyon.propTypes = {
  hideSwitch: PropTypes.bool.isRequired,
  disableSwitch: PropTypes.bool.isRequired,
  tradiksyonOtomatik: PropTypes.bool.isRequired,
  setTradiksyonOtomatik: PropTypes.func.isRequired,
  canAutoTranslate: PropTypes.bool.isRequired,
  chwaLang: PropTypes.array.isRequired,
  setChwaLang: PropTypes.func.isRequired
}

export default AjouteTradiksyon