Generate a barcode

import jsbarcode from "https://cdn.jsdelivr.net/npm/jsbarcode@3.12.1/+esm"

export const take = () => [
  { type: "text", label: "Code", inline: true, spellcheck: false },
  { type: "dropdown", label: "Format", options: formatOptions },
  { type: "text", label: "Font", inline: true, value: "Menlo, monospace" },
  { type: "color", label: "Foreground", value: "#000", inline: true },
  { type: "color", label: "Background", value: "#fff", inline: true },
  { type: "toggle", label: "Display value under code", value: true },
]

export const make = ([
  code,
  [format, help],
  font,
  lineColor,
  background,
  displayValue,
]) => {
  if (!code) return

  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")

  try {
    jsbarcode(svg, code, {
      format,
      font: `${font}, monospace`,
      background,
      lineColor,
      displayValue,
    })
  } catch (error) {
    console.error(error)
    return [
      {
        type: "status",
        value: false,
        message:
          `Code \`${code}\` is not supported by the format \`${format}\`. ` +
          help,
      },
    ]
  }

  return [
    {
      type: "image",
      value: svg.outerHTML,
      format: "svg",
    },
  ]
}

const formatOptions = [
  { label: "UPC", value: ["upc", "The code should be a 12-digit number."] },
  {
    label: "CODE128",
    value: ["code128", "The code may only include ASCII characters."],
  },
  {
    label: "CODE39",
    value: [
      "code39",
      "The code may only include uppercase letters, numbers, `-`, `.`, `$`, `/`, `+`, `%`, and `space`",
    ],
  },
  {
    label: "EAN-13 (GTIN-13)",
    value: ["ean13", "The code should be a 13-digit number."],
  },
  { label: "EAN-8", value: ["ean8", "The code should be an 8-digit number."] },
  { label: "EAN-5", value: ["ean5", "The code should be a 5-digit number."] },
  { label: "EAN-2", value: ["ean2", "The code should be a 2-digit number."] },
  {
    label: "ITF-14",
    value: ["itf14", "The code should be a 14-digit number."],
  },
  { label: "MSI", value: ["msi", "The code may only include numbers."] },
  { label: "MSI10", value: ["msi10", "The code may only include numbers."] },
  { label: "MSI11", value: ["msi11", "The code may only include numbers."] },
  {
    label: "MSI1010",
    value: ["msi1010", "The code may only include numbers."],
  },
  {
    label: "MSI1110",
    value: ["msi1110", "The code may only include numbers."],
  },
  {
    label: "Pharmacode",
    value: ["pharmacode", "The code should be a number from 3 to 131070."],
  },
]

export const options = { mode: "iframe" }