import {useEffect, useState} from 'react'
import {signIn} from 'next-auth/client'
import {useRouter} from 'next/router'
import {
  Button,
  Container,
  FormControl,
  IconButton,
  Input,
  InputAdornment,
  InputLabel,
  LinearProgress,
  Snackbar,
  Typography
} from '@material-ui/core'
import {Visibility, VisibilityOff} from '@material-ui/icons'
import MuiAlert from '@material-ui/lab/Alert'

import {validateEmail} from '../../lib/utils/emails'

function Alert(props) {
  return <MuiAlert elevation={6} variant='filled' {...props} />
}

function Koneksyon() {
  const [loginError, setError] = useState('')
  const [credentials, setCredentials] = useState({username: '', password: ''})
  const [showPassword, setShowPassword] = useState(false)
  const [loading, setLoading] = useState(false)
  const [open, setOpen] = useState(true)
  const router = useRouter()

  const handleUpdate = update => {
    setCredentials({...credentials, ...update})
  }

  const handleClick = async () => {
    setLoading(true)
    const response = await signIn('credentials', {
      redirect: false,
      ...credentials
    })
    if (response.error) {
      setError(response.error)
      setLoading(false)
    } else if (response.ok) {
      setLoading(false)
      router.push('/kont')
    }
  }

  const handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return
    }

    setOpen(false)
    setError('')
  }

  useEffect(() => {
    if (loginError) {
      setOpen(true)
    }
  }, [loginError])

  const handleClickShowPassword = () => {
    setShowPassword(!showPassword)
  }

  const handleMouseDownPassword = event => {
    event.preventDefault()
  }

  return (
    <Container maxWidth='sm'>
      <FormControl fullWidth style={{marginTop: '5em'}} autoComplete='off'>
        <InputLabel htmlFor='username'>Email</InputLabel>
        <Input
          value={credentials.username}
          name='username'
          type='email'
          id='email'
          onChange={event => handleUpdate({username: event.target.value})}
        />
      </FormControl>

      <FormControl fullWidth style={{marginTop: '1em'}}>
        <InputLabel htmlFor='password'>Mot de passe</InputLabel>
        <Input
          value={credentials.password}
          name='password'
          type={showPassword ? 'text' : 'password'}
          id='password'
          endAdornment={
            <InputAdornment position='end'>
              <IconButton
                aria-label='password visibility'
                onClick={handleClickShowPassword}
                onMouseDown={handleMouseDownPassword}
              >
                {showPassword ? <Visibility /> : <VisibilityOff />}
              </IconButton>
            </InputAdornment>
          }
          onChange={event => handleUpdate({password: event.target.value})}
        />
      </FormControl>

      <Button
        fullWidth
        disabled={loading || !validateEmail(credentials.username) || credentials.password === ''}
        style={{marginTop: 50}}
        variant='contained'
        color='primary'
        onClick={handleClick}
      >
        <Typography style={{fontWeight: 'bold'}}>
          Koneksyon
        </Typography>
      </Button>

      {loading && <LinearProgress size={24} style={{width: '100%', marginTop: '1em'}} />}

      {loginError && (
        <Snackbar
          open={open}
          autoHideDuration={6000}
          onClose={handleClose}
        >
          <Alert severity='error' onClose={handleClose}><strong>{loginError}</strong></Alert>
        </Snackbar>
      )}
    </Container>
  )
}

export default Koneksyon