import { jsonFromHTML } from '@prosekit/core'
import { formatHTML } from 'diffable-html-snapshot'
import { describe, expect, it } from 'vitest'

import { setupTest } from '../testing/index.ts'
import { htmlFromMarkdown, markdownFromHTML } from '../testing/markdown.ts'

describe('defineCodeBlockSpec', () => {
  it('can parse and serialize code blocks', () => {
    const { editor, n } = setupTest()
    const doc = n.doc(
      n.codeBlock({ language: 'javascript' }, 'console.log("Hello, javascript!");'),
      n.codeBlock({ language: 'JS' }, 'print("Hello, JS!");'),
      n.codeBlock({ language: 'UNKNOWN_LANG' }, 'print hello world'),
      n.codeBlock('hello world'),
    )
    editor.set(doc)
    const html = editor.getDocHTML()
    expect(formatHTML(html)).toMatchInlineSnapshot(
      `
      "
      <div>
        <pre data-language="javascript">
          <code class="language-javascript">
            console.log("Hello, javascript!");
          </code>
        </pre>
        <pre data-language="JS">
          <code class="language-JS">
            print("Hello, JS!");
          </code>
        </pre>
        <pre data-language="UNKNOWN_LANG">
          <code class="language-UNKNOWN_LANG">
            print hello world
          </code>
        </pre>
        <pre>
          <code>
            hello world
          </code>
        </pre>
      </div>
      "
    `,
    )

    const json = editor.getDocJSON()
    expect(json).toMatchInlineSnapshot(`
      {
        "content": [
          {
            "attrs": {
              "language": "javascript",
            },
            "content": [
              {
                "text": "console.log("Hello, javascript!");",
                "type": "text",
              },
            ],
            "type": "codeBlock",
          },
          {
            "attrs": {
              "language": "JS",
            },
            "content": [
              {
                "text": "print("Hello, JS!");",
                "type": "text",
              },
            ],
            "type": "codeBlock",
          },
          {
            "attrs": {
              "language": "UNKNOWN_LANG",
            },
            "content": [
              {
                "text": "print hello world",
                "type": "text",
              },
            ],
            "type": "codeBlock",
          },
          {
            "attrs": {
              "language": "",
            },
            "content": [
              {
                "text": "hello world",
                "type": "text",
              },
            ],
            "type": "codeBlock",
          },
        ],
        "type": "doc",
      }
    `)

    const json2 = jsonFromHTML(html, { schema: editor.schema })
    expect(json2).toEqual(json)
  })

  it('can parse html generated by remark', () => {
    const { editor } = setupTest()

    const markdown = ['```javascript', '1234', '```'].join('\n')
    const html = htmlFromMarkdown(markdown)

    expect(html).toMatchInlineSnapshot(`
      "<pre><code class="language-javascript">1234
      </code></pre>
      "
    `)
    const json = jsonFromHTML(html, { schema: editor.schema })

    expect(json).toMatchObject(
      {
        content: [
          {
            attrs: {
              language: 'javascript',
            },
            content: [
              {
                text: '1234' + '\n',
                type: 'text',
              },
            ],
            type: 'codeBlock',
          },
        ],
        type: 'doc',
      },
    )
  })

  it('can generate html that can be parsed by remark', () => {
    const { editor, n } = setupTest()
    editor.set(n.doc(n.codeBlock({ language: 'javascript' }, '123')))
    const html = editor.getDocHTML()
    expect(html).toMatchInlineSnapshot(`"<div><pre data-language="javascript"><code class="language-javascript">123</code></pre></div>"`)
    const markdown = markdownFromHTML(html)
    expect(markdown).toMatchInlineSnapshot(`
      "\`\`\`javascript
      123
      \`\`\`
      "
    `)
    expect(markdown).toContain('```javascript')
  })
})