import { Tab, Tabs } from '@mui/material'
import { useRouter } from 'next/router'
import { useReducer } from 'react'

import { mask as maskToken } from '../admin/Voters/mask-token'
import { GlobalCSS } from '../GlobalCSS'
import { Head } from '../Head'
import { ShuffleAndDecrypt } from './decrypt/ShuffleAndDecrypt'
import { getTrusteesOnInit } from './get-latest-from-server'
import { HeaderBar } from './HeaderBar'
import { Keygen } from './keygen/_Keygen'
import { useKeygenAttempt } from './keygen/useKeygenAttempt'
import { initPusher } from './pusher-helper'
import { useTrusteeState } from './trustee-state'

export const TrusteePage = (): JSX.Element => {
  // Grab election parameters from URL
  const router = useRouter()
  const { auth, election_id } = router.query as { auth: string; election_id: string }
  const [masked, toggle_masked] = useReducer((state) => !state, true)

  const mask = masked ? maskToken : (s: string) => s

  const tab = router.isReady && document?.location?.hash === '#after' ? 1 : 0

  return (
    <>
      <Head title={`Privacy Protector${tab === 0 ? '' : ' Unlock'}`} />

      <HeaderBar />
      <main>
        <p>
          Election ID: <b>{election_id}</b>
          <br />
          Auth:{' '}
          <b className="clickable" onClick={toggle_masked}>
            {mask(auth || '')}
          </b>
        </p>

        <Tabs
          indicatorColor="primary"
          onChange={(_, newValue) => router.push(`#${newValue ? 'after' : 'before'}`)}
          style={{ margin: '1rem 0' }}
          textColor="primary"
          value={tab}
        >
          <Tab label="Before Election" />
          <Tab label="After Election" />
        </Tabs>

        {!(election_id && auth) ? <p>Need election_id and auth</p> : <LoadedParams {...{ auth, election_id }} />}
      </main>

      <style jsx>{`
        main {
          max-width: 750px;
          width: 100%;
          margin: 0 auto;
          padding: 1rem;
          overflow-wrap: break-word;
        }

        .clickable {
          cursor: pointer;
        }
      `}</style>
      <style global jsx>{`
        h3 {
          margin-top: 2.5rem;
        }
      `}</style>
      <GlobalCSS />
    </>
  )
}

const LoadedParams = ({ auth, election_id }: { auth: string; election_id: string }) => {
  const attempt = useKeygenAttempt(election_id)
  if (!attempt) return <p>Loading keygen_attempt #</p>

  return <LoadedAttemptNumber {...{ attempt, auth, election_id }} />
}

const LoadedAttemptNumber = ({
  attempt,
  auth,
  election_id,
}: {
  attempt: number
  auth: string
  election_id: string
}) => {
  // Initialize local vote state on client
  const [state, dispatch] = useTrusteeState({ attempt, auth, election_id })

  // Get initial Trustee info
  getTrusteesOnInit({ dispatch, state })

  // Activate Pusher to get updates from the server on new data
  initPusher({ dispatch, state })

  return (
    <>
      {document.location.hash !== '#after' ? (
        <Keygen {...{ dispatch, state }} />
      ) : (
        <ShuffleAndDecrypt {...{ dispatch, state }} />
      )}
    </>
  )
}
