import { useCurrentUser } from 'next-on-rails/current-user' import { useLogout } from 'next-on-rails/devise' import { getDetailFromResponseError, useFlash } from 'next-on-rails/utils'

import Flash from '../components/flash' import LoginForm from '../components/login-form' import RegistrationForm from '../components/registration-form'

const Home = props => {

const { setFlash } = useFlash()
const logout = useLogout()
const { currentUser } = useCurrentUser()

const loginSuccessCallback = response => {
  setFlash({ notice: `Welcome ${response.data.email}!` })
}

const loginErrorCallback = error => {
  setFlash({ alert: getDetailFromResponseError(error) })
}

const registrationSuccessCallback = response => {
  setFlash({
    notice: `Welcome ${response.data.email}! An email to confirm your account has been sent to this email address.`
  })
}

return (
  <div className="container pt-4">
    <Flash />
    <h1>Welcome to Next On Rails!</h1>

    <img src="https://media.giphy.com/media/12NUbkX6p4xOO4/giphy.gif" alt="Magic" />

    <p>{currentUser ? `Hi, ${currentUser.email}` : 'You are not logged'}</p>

    {currentUser ? (
      <button className="btn btn-primary" onClick={logout}>
        Logout
      </button>
    ) : (
      <div className="row">
        <div className="col">
          <h6>Login</h6>
          <LoginForm successCallback={loginSuccessCallback} errorCallback={loginErrorCallback} />
        </div>
        <div className="col">
          <h6>Register</h6>
          <RegistrationForm successCallback={registrationSuccessCallback} />
        </div>
      </div>
    )}
  </div>
)

}

export default Home