<script setup lang="ts">
import { Milkdown, useEditor } from '@milkdown/vue';
import {
  defaultValueCtx,
  Editor,
  editorViewOptionsCtx,
  rootCtx
} from '@milkdown/kit/core';
import {
  codeBlockComponent,
  codeBlockConfig
} from '@milkdown/kit/component/code-block';
import { nord } from '@milkdown/theme-nord';
import doc from 'assets/markdown/api.md?raw';
import { commonmark } from '@milkdown/kit/preset/commonmark';
import { basicSetup } from 'codemirror';
import { oneDark } from '@codemirror/theme-one-dark';
import { defaultKeymap } from '@codemirror/commands';
import { keymap } from '@codemirror/view';
import { languages } from '@codemirror/language-data';
import '@milkdown/theme-nord/style.css';
import 'assets/style/markdown.css';
import { gfm } from '@milkdown/kit/preset/gfm';
import { useRoute } from 'vue-router';

const route = useRoute();
let myDoc = doc
  .split('{{.remoteHost}}')
  .join(route.query.gateway as string)
  .split('{{.shopHost}}')
  .join(route.query.shop as string)
  .split('{{.payKey}}')
  .join(route.query.payKey as string)
  .split('{{.paySecret}}')
  .join(route.query.paySecret as string);

// const check = html`
//   <svg
//     xmlns="http://www.w3.org/2000/svg"
//     fill="none"
//     viewBox="0 0 24 24"
//     stroke-width="1.5"
//     stroke="currentColor"
//     class="w-6 h-6"
//   >
//     <path
//       stroke-linecap="round"
//       stroke-linejoin="round"
//       d="M4.5 12.75l6 6 9-13.5"
//     />
//   </svg>
// `;
useEditor(root => {
  return Editor.make()
    .config(nord)
    .config(ctx => {
      ctx.set(rootCtx, root);
      ctx.set(defaultValueCtx, myDoc);
      ctx.update(editorViewOptionsCtx, prev => ({
        ...prev,
        editable: () => false
      }));
      ctx.update(codeBlockConfig.key, defaultConfig => ({
        ...defaultConfig,
        languages,
        extensions: [basicSetup, oneDark, keymap.of(defaultKeymap)]
        // renderLanguage: (language, selected) => {
        //   return html`
        //     <span class="leading">${selected ? check : null}</span>
        //     ${language}
        //   `;
        // }
      }));
    })
    .use(gfm)
    .use(codeBlockComponent)
    .use(commonmark);
});
</script>

<template>
  <Milkdown />
</template>
