import React, { useState, useEffect } from 'react'

import Header from '../components/header'

import styles from './validation.module.css'
import constants from '../constants'

function fetchValidation() {
  return new Promise((resolve) => {
    fetch(`${constants.apiUrl}validationtoken`, {
      credentials: 'include',
    })
      .then((resp) => {
        return resp.json()
      })
      .then((res) => {
        resolve(res)
      })
  })
}

export default function Validation() {
  const [token, setToken] = React.useState('')

  useEffect(() => {
    fetchValidation().then((res) => {
      setToken(res.key)
    })
  }, [])

  return (
    <div>
      <Header title={'Validálás'} />
      <div className={'pageHeader'}>
        <h1>Validálás</h1>
      </div>
      <center>
        <div className={styles.descrip}>
          Különböző okokból kellhet, hogy bizonyítsd hogy az oldalhoz van
          hozzáférésed. Ebben az esetben ezzel a tokennel tudod:
        </div>
        {token && <div className={styles.tokenContainer}>{token}</div>}
      </center>
    </div>
  )
}