import Head from 'next/head'
import Link from 'next/link'
import { useEffect, useState } from 'react'
import styles from './wifi-qrcode.module.scss'
import { QRCodeSVG } from 'qrcode.react'
import { useRouter } from 'next/router'

function generateQRString(details) {
  const bits = {
    S: details.ssid,
  }
  if (details.psk) {
    bits.P = details.psk
    bits.T = "WPA"
  } else {
    bits.T = "nopass"
  }
  if (details.hidden) {
    bits.H = "true"
  }
  const escapeStr = (s) => {
    if (s.match(/^[0-9A-Fa-f]+$/)) {
      return `"${s}"`
    }
    return s
  }
  const generateWifiFromBits = (bits) => {
    let o = [];
    for (const b in bits) {
      if (!bits.hasOwnProperty(b)) continue
      o.push(`${b}:${escapeStr(bits[b])}`)
    }
    return o.join(';')
  }
  return `WIFI:${generateWifiFromBits(bits)};;`
}

export default function WifiQRCode() {
  const [details, setDetails] = useState(null)
  const router = useRouter()

  useEffect(() => {
    let {
      eventName,
      ssid,
      psk,
      hidden,
    } = router.query

    eventName = eventName || ''
    ssid = ssid || ''
    psk = psk || ''
    hidden = hidden || false

    setDetails({
      eventName,
      ssid,
      psk,
      hidden,
    })
  }, [router.query])

  if (details === null || !details.eventName) return (<div />)

  const hasLogo = details.eventName.match(/^http[s]?:/)

  return (
    <div className={styles.background}>
      <div className={styles.page}>
        {hasLogo ?
          <img className={styles.eventLogo} src={details.eventName} /> :
          <h1 className={styles.event}>{details.eventName}</h1>}
        <h2 className={styles.network}>SSID: {details.ssid}</h2>
        <QRCodeSVG value={generateQRString(details)} level={"M"} includeMargin={false} size={128} className={styles.qrcode} />
	{details.psk ? <div className={styles.passwordContainer}>Password: <tt className={styles.password}>{details.psk}</tt></div> : null}
        <img src={"../../assets/wifi.png"} className={styles.wifiLogo} />
      </div>
    </div>
  )
}