import IconButton from '@material-ui/core/IconButton'
import type { Theme } from '@material-ui/core/styles'
import { Visibility, VisibilityOff } from '@material-ui/icons'
import { makeStyles } from '@material-ui/core/styles'
import clsx from 'clsx'
import React, { FC, SyntheticEvent } from 'react'
import { useAdornmentButton } from './AdornmentButton'

// eslint-disable
const useStyles = makeStyles<Theme>(theme => {
  return {
    icon: {
      color: theme.palette.primary.main,
      backgroundColor: 'transparent',
      paddingRight: 0,
      // height: 32,
      // width: 32,
      opacity: 0.25,
      '&.showing': {
        opacity: 0.5,
        color: theme.palette.secondary.main,
      },
      transition: theme.transitions.create('opacity', {
        duration: theme.transitions.duration.short,
      }),
      '&:hover': {
        backgroundColor: 'transparent',
        opacity: 1,
      },
      '& .MuiSvgIcon-root': {
        width: 20,
        height: 20,
      },
    },
  }
})

interface IProps {
  onClick: VoidFunction
  value: boolean
}

export const usePasswordToggle = () =>
  useAdornmentButton(ShowPasswordButton, false)

export const ShowPasswordButton: FC<IProps> = ({ onClick, value }) => {
  const handleMouseDownPassword = (event: SyntheticEvent) => {
    event.preventDefault()
  }
  const classes = useStyles()
  return (
    <IconButton
      aria-label="toggle password visibility"
      onClick={onClick}
      onMouseDown={handleMouseDownPassword}
      size="small"
      disableFocusRipple
      className={clsx(classes.icon, { showing: value })}
    >
      {value ? <Visibility /> : <VisibilityOff />}
    </IconButton>
  )
}