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

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)};;`
}

function WifiQRCode({ details }) {
  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>
  )
}

WifiQRCode.getInitialProps = async (ctx) => {
  const {
    eventName,
    ssid,
    psk,
    hidden,
  } = ctx.query

  return {details: {
    eventName,
    ssid,
    psk,
    hidden,
  }}
}

export default WifiQRCode