QR code

export const QrCodeStyle = forSlots(QrCodeSlots)(Recipes.QrCode({}))

export const qrCode = (style: NamedStyle<typeof QrCodeSlots>, h: HtmlBuilder<never>): Html =>
  QrCode.view({ id: 'preview-qr', value: 'https://foldkit-plus.pages.dev', style }, h)

const LOGO = `data:image/svg+xml,${encodeURIComponent(
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="8" fill="#4f46e5"/><path d="M10 9h12v4h-8v3h7v4h-7v6h-4z" fill="#fff"/></svg>',
)}`

// An overlay raises the error correction to H, so the code still reads under it.
export const qrCodeLogo = (style: NamedStyle<typeof QrCodeSlots>, h: HtmlBuilder<never>): Html =>
  QrCode.view(
    {
      id: 'logo-qr',
      value: 'https://foldkit-plus.pages.dev/components',
      label: 'QR code for the Foldkit Plus components',
      overlay: h.img([h.Src(LOGO), h.Alt('')]),
      style,
    },
    h,
  )

// The buttons send a Message; `update` answers it with `QrCode.Download`.
export const qrCodeDownload = <Message>(
  style: NamedStyle<typeof QrCodeSlots>,
  onDownload: (format: QrCode.Format) => Message,
  h: HtmlBuilder<Message>,
): Html =>
  h.div(
    [h.Style({ display: 'grid', gap: '0.75rem', justifyItems: 'start' })],
    [
      QrCode.view({ id: 'download-qr', value: 'WIFI:T:WPA;S:Guests;P:welcome-in;;', style }, h),
      h.div(
        [h.Style({ display: 'flex', gap: '0.5rem' })],
        [
          Button.view({ label: 'Download PNG', onClick: onDownload('png'), style: ButtonStyle }, h),
          Button.view({ label: 'Download SVG', onClick: onDownload('svg'), style: ButtonStyle }, h),
        ],
      ),
    ],
  )

/** In `update`: the drawn code, saved in the colors the page shows it in. */
export const downloadQr = (format: QrCode.Format) =>
  QrCode.Download({ id: 'download-qr', format, filename: 'guest-wifi', pixels: 512 })