import {DateTime} from 'luxon'
import Link from 'next/link'
import {Button, FormController} from '~/components/form'

import useUser from '~/hooks/useUser'
import redirect from '~/utils/redirectGetInitialProps'

ConfirmEmail.getInitialProps = async ({ctx, user}) => {
  const {axios} = ctx
  const {data: links} = await axios.get('/api/email/links')

  if(!user)
    return redirect(ctx, 302, '/login')

  if(user.email_confirmed)
    return redirect(ctx, 302, '/account')

  return {links}
}

export default function ConfirmEmail({links}) {
  const user = useUser()
  const lastLink = getLastLinkTime(links)

  return (
    <>
      <h2>Confirm Email Address</h2>
      <p>
        In order to make use of account related features, we require you to
        confirm your email address.
      </p>

      {lastLink ? (
        <>
          <p>
            We last sent an email to <strong>{user.email}</strong> at:
          </p>

          <p style={{textAlign: 'center'}}>
            {lastLink.time_created.toFormat('LLLL dd, h:mm a')}
            <br/>
            <em>This email will be valid until {lastLink.time_created.plus(lastLink.timeout_length).toFormat('LLLL dd, h:mm a')}</em>
          </p>

          <p>
            If you haven't received it yet, please be patient.  Emails can take several
            minutes to be delivered, and depending on your email provider may also
            be subject to additional scans or verification before it shows up in
            your inbox.
          </p>

          <p>
            Also, be sure to check your spam or junk folders - registration email
            like the one we sent can occasionally be caught in those.
          </p>

          <p>
            If you've waited a few minutes, and you're sure it won't arrive, you can
            click the button below to send another one.  If you still have issues,
            please feel free to <Link href="/contact"><a>contact us</a></Link>.
          </p>

          <FormController url="/api/email" afterSubmit={() => window.location.reload()}>
            <Button type="submit">Resend Email</Button>
          </FormController>
        </>
      ) : (
        <>
          <p>
            Click the button below to send a confirmation email.
          </p>

          <FormController url="/api/email" afterSubmit={() => window.location.reload()}>
            <Button type="submit">Resend Email</Button>
          </FormController>
        </>
      )}
    </>
  )
}

function getLastLinkTime(links) {
  if(links.length < 1)
    return null;

  let lastLink = links[0]
  lastLink.time_created = DateTime.fromISO(lastLink.time_created)

  for(const current of links){
    current.time_created = DateTime.fromISO(current.time_created)
    if(current.time_created.diff(lastLink.time_created).as('seconds') > 0)
      lastLink = current;
  }

  return lastLink
}