import * as action from '../../actions'

import { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { history } from '../../App';

const RegisterForm = ({ onRegister }) => {
  let [login, setLogin] = useState()
  let [password, setPassword] = useState()
  let [password2, setPassword2] = useState()
  return (
    <>
      <h1>Web-player</h1>
      <div className='forms'>
        <h2 className='highlightYellow'>Registration</h2>
        <input className='forms__input' type="text" placeholder='Login' onChange={(e) => setLogin(e.target.value)} />
        <input className='forms__input' type="password" placeholder='Password' onChange={(e) => setPassword(e.target.value)} />
        <input 
          className='forms__input' 
          disabled={!password} type="password" placeholder='Repeat Password *' 
          onChange={(e) => setPassword2(e.target.value)} 
        />
        <small style={{ color: 'red' }}>{password2 && password2 !== password ? 'Passwords do not match' : ''}</small>
        <br />
        <button 
          className='forms__button highlightYellow' 
          disabled={!password || !login || password2 !== password} 
          onClick={() => onRegister(login, password)}
        >Register</button>
        <br />
        <Link className='sidebar__link highlightYellow' to="/login">Back to log-in page</Link>
      </div>
    </>
  )
}
export const RegisterFormConnect = connect(null, { onRegister: action.actionRegister })(RegisterForm)

const LoginForm = ({ loged, onLogin }) => {
  let [login, setLogin] = useState()
  let [password, setPassword] = useState()
  let [log, setLog] = useState()

  useEffect(() => {
    setLog(loged)
    if (log?.payload && localStorage.authToken) history.push('/player')
  }, [loged, log])

  return (
    <>
      <h1>Web-player</h1>
      <div className='forms'>
        <h2 className='highlightYellow'>Log-in</h2>
        <input className='forms__input' type="text" placeholder='Login' onChange={(e) => setLogin(e.target.value)} />
        <input className='forms__input' type="password" placeholder='Password' onChange={(e) => setPassword(e.target.value)} />
        <small style={{ color: 'red' }}>
          {loged.status === 'REJECTED' || (loged.status === 'RESOLVED' && !loged.payload)? 'invalid login or password' : ''}
        </small>
        <br />
        <button
          className='forms__button highlightGreen'
          disabled={!password || !login}
          onClick={() => { onLogin(login, password) }}
        >Login</button>
        <p>- OR -</p>
        <Link className='forms__link highlightYellow' to="/registration">Register new user</Link>
      </div>
    </>
  )
}
export const LoginFormConnect = connect(state => ({ loged: state.promise.login || {} }), { onLogin: action.actionFullLogin })(LoginForm)