import { describe, expect, it, beforeAll } from 'vitest'
import { mount } from '@vue/test-utils';
import { defineComponent } from 'vue'

import { useFormatTypes, FormatTypeStore } from '../use-format-types';
import { create } from '../create';
import { toHTMLString } from '../to-html-string';
import { specWithRegistration } from './helpers';

function createNode( HTML ) {
	const doc = document.implementation.createHTMLDocument( '' );
	doc.body.innerHTML = HTML;
	return doc.body.firstChild;
}

describe( 'toHTMLString', () => {
  let TestComponent;
  let store: FormatTypeStore;
	beforeAll(async () => {
    TestComponent = defineComponent({
      setup () {
        return useFormatTypes();
      }
    });

    store = mount(TestComponent).vm;
	});

  specWithRegistration.forEach(
    ( {
      description,
      formatName,
      formatType,
      html,
      value,
      noToHTMLString,
    } ) => {
      if ( noToHTMLString ) {
        return;
      }

      // eslint-disable-next-line jest/valid-title
      it.skip( description, () => {
        console.log(description, formatName);
        if ( formatName ) {
          store.registerFormatTypes( { name: formatName, ...formatType } );
        }

        const result = toHTMLString( { value } );

        if ( formatName ) {
          store.unregisterFormatTypes( formatName );
        }

        expect( result ).toEqual( html );
      } );
    }
  );

	it.skip( 'should extract recreate HTML 1', () => {
		const HTML =
			'one <em>two 🍒</em> <a href="#"><img src=""><strong>three</strong></a><img src="">';
		const element = createNode( `<p>${ HTML }</p>` );

		expect( toHTMLString( { value: create( { element } ) } ) ).toEqual(
			HTML
		);
	} );

	it.skip( 'should extract recreate HTML 2', () => {
		const HTML =
			'one <em>two 🍒</em> <a href="#">test <img src=""><strong>three</strong></a><img src="">';
		const element = createNode( `<p>${ HTML }</p>` );

		expect( toHTMLString( { value: create( { element } ) } ) ).toEqual(
			HTML
		);
	} );

	it.skip( 'should extract recreate HTML 3', () => {
		const HTML = '<img src="">';
		const element = createNode( `<p>${ HTML }</p>` );

		expect( toHTMLString( { value: create( { element } ) } ) ).toEqual(
			HTML
		);
	} );

	it.skip( 'should extract recreate HTML 4', () => {
		const HTML = '<em>two 🍒</em>';
		const element = createNode( `<p>${ HTML }</p>` );

		expect( toHTMLString( { value: create( { element } ) } ) ).toEqual(
			HTML
		);
	} );

	it.skip( 'should extract recreate HTML 5', () => {
		const HTML =
			'<em>If you want to learn more about how to build additional blocks, or if you are interested in helping with the project, head over to the <a href="https://github.com/WordPress/gutenberg">GitHub repository</a>.</em>';
		const element = createNode( `<p>${ HTML }</p>` );

		expect( toHTMLString( { value: create( { element } ) } ) ).toEqual(
			HTML
		);
	} );

	it.skip( 'should serialize neighbouring formats of same type', () => {
		const HTML = '<a href="a">a</a><a href="b">a</a>';
		const element = createNode( `<p>${ HTML }</p>` );

		expect( toHTMLString( { value: create( { element } ) } ) ).toEqual(
			HTML
		);
	} );

	it.skip( 'should serialize neighbouring same formats', () => {
		const HTML = '<a href="a">a</a><a href="a">a</a>';
		const element = createNode( `<p>${ HTML }</p>` );

		expect( toHTMLString( { value: create( { element } ) } ) ).toEqual(
			HTML
		);
	} );
} );