import React, { ReactElement, useState, useCallback, useContext } from 'react'
import './Login.scss'
import { AppContext } from '@sasjs/test-framework'
import { Redirect } from 'react-router-dom'

const Login = (): ReactElement<{}> => {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const appContext = useContext(AppContext)

  const handleSubmit = useCallback(
    (e) => {
      e.preventDefault()
      appContext.adapter.logIn(username, password).then((res) => {
        appContext.setIsLoggedIn(res.isLoggedIn)
      })
    },
    [username, password, appContext]
  )

  return !appContext.isLoggedIn ? (
    <div className="login-container">
      <img src="sasjs-logo.png" alt="SASjs Logo" />
      <form onSubmit={handleSubmit}>
        <div className="row">
          <label>User Name</label>
          <input
            placeholder="User Name"
            value={username}
            required
            onChange={(e) => setUsername(e.target.value)}
          />
        </div>
        <div className="row">
          <label>Password</label>
          <input
            placeholder="Password"
            type="password"
            value={password}
            required
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <button type="submit" className="submit-button">
          Log In
        </button>
      </form>
    </div>
  ) : (
    <Redirect to="/" />
  )
}

export default Login