import {useState, useEffect} from 'react'
import {useRouter} from 'next/router'
import useUser from 'lib/useUser'
import fetchJson from 'lib/fetchJson'
import {Layout} from 'components'

const Verify = () => {
  const router = useRouter()
  const {user, mutateUser} = useUser({
    redirectToLogin: true,
    redirectToApps: true,
  })
  const [errorMsg, setErrorMsg] = useState('')
  const [sending, setSending] = useState(false)
  const [resent, setResent] = useState(false)

  const handleSendMail = async e => {
    e.preventDefault()
    setErrorMsg('')
    setSending(true)
    try {
      await fetch('/api/verify')
      setResent(true)
    } catch (error) {
      setErrorMsg('Could not send verification email')
    } finally {
      setSending(false)
    }
  }

  const handleKey = async e => {
    e.preventDefault()
    const key = e.currentTarget.key.value
    try {
      mutateUser(
        await fetchJson('/api/verify', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({_id: user._id, key}),
        })
      )
    } catch (err) {
      setErrorMsg('Could not verify user')
    }
  }

  return (
    <Layout>
      {!user
        ? (
          <div className="window window--popup">
            <p>Loading...</p>
          </div>
        ) : (
          <div className="window window--popup">
            <p>One last step missing</p>
            <p>{`To start using Notes App type the verification code we sent to your email (${user.email}):`}</p>
            <form onSubmit={handleKey}>
              <input type="text" placeholder="Verification key" name="key" />
              <button className="window__button" type="submit">Send</button>
            </form>
            {
              sending
                ? (
                  <p>Sending...</p>
                ) : (
                  resent
                    ? (
                      <p>Mail was successfully sent again, check your mailbox!</p>
                    ) : (
                      <p>If you didn't get verification email&nbsp;
                        <span className="verify__sendEmail" onClick={handleSendMail}>send it again</span>.
                      </p>
                    )
                )
            }
            {errorMsg && <p className="verify__errorMsg">{errorMsg}</p>}
          </div>
        )
      }
      <style jsx>{`
        form {
          padding .5em 0;
        }

        input {
          padding: .75em;
          border: 1px dashed #333;
          border-radius: .5em;
        }

        p {
          line-height: 1.33;
          padding: .5em 0;
        }

        .verify__sendEmail {
          color: blue;
          cursor: pointer;
        }
        .verify__errorMsg {
          color: brown;
        }
      `}</style>
    </Layout>
  )
}

export default Verify