import { defaultValueCtx, Editor, rootCtx } from '@milkdown/core';
import { html } from 'atomico';
import { listItemBlockComponent, listItemBlockConfig, ListItemBlockConfig, listItemBlockView } from '@milkdown/components/list-item-block'
import { commonmark } from '@milkdown/preset-commonmark';
import { gfm } from '@milkdown/preset-gfm';
import { nord } from '@milkdown/theme-nord'
import { listener, listenerCtx } from '@milkdown/plugin-listener';
import '@milkdown/theme-nord/style.css'

const markdown =
`# Milkdown Vanilla Commonmark

> You're scared of a world where you're needed.

This is a demo for using Milkdown with **Vanilla Typescript**.

- A list
- [ ] Something to do
- [x] Something done`


function configureListItem(ctx: Ctx) {
    ctx.set(listItemBlockConfig.key, {
        renderLabel: (label: string, listType, checked?: boolean) => {
            if (checked == null) {
                if (listType === 'bullet') {
                    return html`<span class='label'>•</span>`
                }

                return html`<span class='label'>${label}</span>`
            } else {
                return html`<input class='label' type="checkbox" checked=${checked} />`
            }
        },
    })
}

Editor
  .make()
  .config(ctx => {
      ctx.set(rootCtx, "#editor")
      ctx.set(defaultValueCtx, markdown)

      const listener = ctx.get(listenerCtx);
      listener.markdownUpdated((ctx, markdown, prevMarkdown) => {
        if (markdown !== prevMarkdown) {
            console.log(markdown);
        }
      })
  })
  .config(configureListItem)
  .use(commonmark)
  .use(gfm)
  .use(nord)
  .use(listener)
  .use(listItemBlockComponent)
  .create();