// Dependencies
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { nsMerge, getSearchParam } from 'shared/utils.mjs'
// Hooks
import { useEffect, useState, useContext } from 'react'
import { useBackend } from 'shared/hooks/use-backend.mjs'
import { useAccount } from 'shared/hooks/use-account.mjs'
import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next'
// Context
import { LoadingStatusContext } from 'shared/context/loading-status-context.mjs'
// Components
import Link from 'next/link'
import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
import { BareLayout } from 'site/components/layouts/bare.mjs'
import { Spinner } from 'shared/components/spinner.mjs'
import { Robot } from 'shared/components/robot/index.mjs'
import { BackToAccountButton } from 'shared/components/account/shared.mjs'
import { HelpIcon } from 'shared/components/icons.mjs'

// Translation namespaces used on this page
const ns = nsMerge(pageNs, 'account', 'susi')

const ConfirmSignUpPage = ({ page }) => {
  // Hooks
  const { setAccount, token } = useAccount()
  const backend = useBackend()
  const { setLoadingStatus } = useContext(LoadingStatusContext)
  const { t } = useTranslation(ns)
  const router = useRouter()

  // State
  const [error, setError] = useState(false)
  const [id, setId] = useState()
  const [check, setCheck] = useState()
  const [updated, setUpdated] = useState()

  useEffect(() => {
    const newId = getSearchParam('id')
    const newCheck = getSearchParam('check')
    if (newId !== id) setId(newId)
    if (newCheck !== check) setCheck(newCheck)
  }, [id, check])

  // Effects
  useEffect(() => {
    // Async inside useEffect requires this approach
    const confirmEmail = async () => {
      setLoadingStatus([true, 'status:contactingBackend'])
      const confirmation = await backend.loadConfirmation({ id, check })
      if (confirmation.success && confirmation.data.confirmation) {
        const result = await backend.updateAccount({
          confirm: 'emailchange',
          confirmation: confirmation.data.confirmation.id,
          check: confirmation.data.confirmation.check,
        })
        if (result.success && !updated) {
          setUpdated(true)
          setLoadingStatus([true, 'status:settingsSaved', true, true])
          setAccount(result.data.account)
          setError(false)
          router.push('/account')
        }
      }
    }
    // Call async methods
    if (token && id && check && !updated) confirmEmail()
  }, [id, check, backend, router, setAccount])

  // Update path with dynamic ID
  if (!page) return null
  page.path = ['confirm', 'emailchange', id]

  // Short-circuit errors
  if (error)
    return (
      <PageWrapper {...page} title={t('account:politeOhCrap')} layout={BareLayout} footer={false}>
        <div className="max-w-md flex flex-col items-center m-auto justify-center h-screen text-center">
          <h1 className="text-center">{t('account:politeOhCrap')}</h1>
          <Robot pose="ohno" className="w-48" embed />
          <p className="mt-4">{t('account:vagueError')}</p>
          <div className="flex flex-row gap-4 items-center mt-4">
            <BackToAccountButton />
            <Link className="btn btn-primary mt-4 pr-6" href="/support">
              <HelpIcon className="w-6 h-6 mr-4" /> {t('contactSupport')}
            </Link>
          </div>
        </div>
      </PageWrapper>
    )

  return (
    <PageWrapper {...page} title={t('account:oneMomentPlease')} layout={BareLayout} footer={false}>
      <div className="max-w-md flex flex-col items-center m-auto justify-center h-screen text-center">
        <h1 className="text-center">{t('account:oneMomentPlease')}</h1>
        <p className="text-center">
          <Spinner />
        </p>
      </div>
    </PageWrapper>
  )
}

export default ConfirmSignUpPage

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ns)),
      page: { locale },
    },
  }
}