import header, aside, footer, div, svg, title, script, g, path, h1, span, b, a, img from require 'mmm.dom'
import navigate_to from (require 'mmm.mmmfs.util') require 'mmm.dom'
import get_plugins from require 'mmm.mmmfs.meta'

unpack or= table.unpack

pick = (...) ->
  num = select '#', ...
  i = math.ceil math.random! * num
  (select i, ...)

iconlink = (href, src, alt, style) -> a {
  class: 'iconlink'
  target: '_blank'
  rel: 'me'
  :href
  img :src, :alt, :style
}

logo = svg {
  class: 'sun'
  viewBox: '0 0 1 1'
  xmlns: 'http://www.w3.org/2000/svg'
  baseProfile: 'full'
  version: '1.1'

  title 'Home'

  g {
    transform: 'translate(0.5, 0.52)'
    g {
      class: 'circle out',
      path fill: 'none', 'stroke-width': 0.053, d: 'M 0.5 0.15625 C 0.44839986 0.15625 0.22697194 0.28343797 0.20117188 0.328125 C 0.17537181 0.37281203 0.1753718 0.62718797 0.20117188 0.671875 C 0.22697195 0.71656203 0.44839986 0.84375 0.5 0.84375 C 0.55160014 0.84375 0.77302806 0.71656203 0.79882812 0.671875 C 0.82462819 0.62718797 0.8246282 0.37281203 0.79882812 0.328125 C 0.77302805 0.28343797 0.55160014 0.15625 0.5 0.15625 z', transform: 'translate(-0.5, -0.5)'
    }

    g {
      class: 'circle in',
      path stroke: 'none', d: 'M 0.50195312 0.38476562 C 0.4851293 0.38476563 0.41466191 0.42683639 0.40625 0.44140625 C 0.39783809 0.45597611 0.39783809 0.53816452 0.40625 0.55273438 C 0.41466191 0.56730423 0.4851293 0.609375 0.50195312 0.609375 C 0.51877695 0.609375 0.59119746 0.56730423 0.59960938 0.55273438 C 0.60802129 0.53816452 0.60802129 0.45597611 0.59960938 0.44140625 C 0.59119746 0.42683639 0.51877695 0.38476562 0.50195312 0.38476562 z', transform: 'translate(-0.5, -0.5)'
    }
  }
}

gen_header = ->
  header {
    div {
      h1 {
        navigate_to '', logo, title: 'Home'
        span {
          span 'hw', class: 'bold'
          '​'
          '.s‑ol.nu'
        }
      }
      "low-profile hexagon keyboards."
    },
  }

footer = footer {
  span {
    "made with \xe2\x98\xbd by "
    a 's-ol', href: 'https://s-ol.nu'
    ", #{os.date '%Y'}"
  }

  div style: 'flex: 1'

  a {
    target: '_blank'
    rel: 'license'
    href: 'http://creativecommons.org/licenses/by/4.0/'
    img {
      src: '/static/icons/cc-by: image/png' -- https://i.creativecommons.org/l/by/4.0/80x15.png
      alt: 'Creative Commons Attribution 4.0 International License'
    }
  }

  div {
    class: 'icons'
    -- https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/
    iconlink 'https://merveilles.town/@s_ol', '/static/icons/mastodon: image/svg+xml', 'mastodon'
    iconlink 'https://twitter.com/S0lll0s', '/static/icons/twitter: image/svg+xml', 'twitter'
    iconlink 'https://www.youtube.com/channel/UCWBiBzZvRzf0hzHbsJnwqsA', '/static/icons/youtube: image/svg+xml', 'youtube'
    iconlink 'https://instagram.com/s_ol.pics', '/static/icons/instagram: image/svg+xml', 'instagram'
  }
}

get_header_tags = =>
  title_text = (@get 'title: text/plain') or @gett 'name: alpha'

  l = (str) ->
    str = str\gsub '[%s\n]+$', ''
    str\gsub '\n', ' '
  e = (str) -> string.format '%q', l str

  meta = "
    <meta charset=\"UTF-8\">
    <title>#{l title_text}</title>
  "

  if page_meta = @get '_meta: mmm/dom'
    meta ..= page_meta
  else
    meta ..= "
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">

    <meta property=\"og:title\" content=#{e title_text} />
    <meta property=\"og:type\"  content=\"website\" />
    <meta property=\"og:url\"   content=\"https://hw.s-ol.nu#{@path}/\" />
    <meta property=\"og:site_name\" content=\"mmm\" />"

    if url = (@get '_image: URL -> image/jpeg') or @get 'preview: URL -> image/jpeg'
      meta ..= "
    <meta property=\"og:image\" content=#{e url} />"

    if desc = @get '_description: text/plain'
      meta ..= "
    <meta property=\"og:description\" content=#{e desc} />
    <meta name=\"description\" content=#{e desc} />"

    if keywords = @get '_keywords: text/plain'
      meta ..= "
    <meta name=\"keywords\" content=#{e keywords} />"

    if url = @get '_canonical: URL'
      meta ..= "
    <link rel=\"canonical\" href=#{e url} />"

  meta

get_plugin_snippets = (type) =>
  buf = ''
  for plugin in get_plugins @
    if snippet = plugin\get type
      buf ..= snippet

  buf

render = (content, fileder, opts={}) ->
  opts.meta or= get_header_tags fileder
  opts.scripts or= ''

  unless opts.noview
    content = [[
      <div class="view main">
        <div class="content">
      ]] .. content .. [[
        </div>
      </div>
    ]]

  buf = [[
<!DOCTYPE html>
<html lang="en">
  <head>]]
  buf ..= if STATIC then STATIC.style else [[<link rel="stylesheet" type="text/css" href="/static/style/:text/css" />]]
  buf ..= "
    #{get_plugin_snippets fileder, 'styles: text/html+frag'}
    #{opts.meta}
  </head>
  <body>
    #{gen_header!}

    #{content}

    #{footer}
    #{get_plugin_snippets fileder, 'scripts: text/html+frag'}"
  buf ..= if STATIC then '' else [[
    <script type="text/javascript" src="/static/highlight-pack/:text/javascript"></script>
    <script type="text/javascript">hljs.initHighlighting()</script>]]

  buf ..= opts.scripts
  buf ..= STATIC.scripts if STATIC
  buf ..= "
  </body>
</html>"

  buf

{
  {
    -- inp: 'text/html%+frag',
    -- @TODO: this doesn't feel right... maybe mmm/dom has to go?
    inp: 'mmm/dom',
    out: 'text/html',
    cost: 3
    transform: (html, fileder) => render html, fileder
  },
  {
    inp: 'mmm/dom%+noview',
    out: 'text/html',
    cost: 3
    transform: (html, fileder) => render html, fileder, noview: true
  }
}