<script lang="ts">
  import { onMount } from 'svelte'
  import { unified } from 'unified'
  import remarkParse from 'remark-parse'
  import remarkRehype from 'remark-rehype'
  import remarkGfm from 'remark-gfm'
  import rehypeHighlight from 'rehype-highlight'
  import rehypeStringify from 'rehype-stringify'
  import hljs from 'highlight.js'
  import 'highlight.js/styles/nord.min.css'
  import TopBar from '../components/TopBar.svelte'
  import Icon from '@iconify/svelte'
  import { getLangFromUrl } from '$lib/utils'

  let decompressed: string
  let isMarkdown = false
  let isPlainText = false

  onMount(async () => {
    let lang = getLangFromUrl()
    lang = lang === 'mrwn' || lang === 'gflm' ? 'md' : lang // back compatiblity with old links

    // extract the part in the url after the hash
    const hash = window.location.hash.slice(1)
    if (hash) {
      // decompress the data
      const { decompress } = await import('$lib/brotli')
      decompressed = await decompress(hash)

      // Markdown
      if (lang === 'md') {
        const html = await unified()
          .use(remarkParse)
          .use(remarkGfm)
          .use(remarkRehype)
          .use(rehypeHighlight)
          .use(rehypeStringify)
          .process(decompressed)
        isMarkdown = true
        decompressed = html.toString()
      }
      // Plain text
      else if (lang === 'plt' || !lang) {
        isPlainText = true
      }
      // Code
      else {
        decompressed = hljs.highlight(lang, decompressed).value
      }
    } else {
      // Redirect to editor page
      window.location.href = '/editor'
    }
  })

  function getUrlDataPart(): string {
    return window.location.search + window.location.hash
  }
</script>

<div class="overflow-hidden h-screen flex flex-col">
  {#if decompressed}
    <TopBar>
      <a
        href={'/editor' + getUrlDataPart()}
        class="p-1 hover:bg-gray-600/50"
        title="Edit a copy of this note"
      >
        <Icon class="text-xl" icon="fluent:document-edit-16-regular" />
      </a>
    </TopBar>
    <div class="overflow-y-auto grow">
      <div class="prose dark:prose-invert lg:py-12 p-[0.5em] md:max-w-3xl md:mx-auto lg:max-w-4xl">
        {#if isMarkdown}
          {@html decompressed}
        {:else if isPlainText}
          <div class="whitespace-pre-line">
            {decompressed}
          </div>
        {:else}
          <pre><code>{@html decompressed}</code></pre>
        {/if}
      </div>
    </div>
  {/if}
</div>

<style lang="scss">
  :global(pre code.hljs) {
    background-color: transparent;
    padding: 0;
  }
</style>
