import '../../../../../dist/zn.min.js';
import {aTimeout, expect, fixture, html} from '@open-wc/testing';
import type ZnEditor from '../../editor.component';

interface QuillLike {
  focus: () => void;
  insertText: (index: number, text: string, source: string) => void;
  setSelection: (index: number, length: number, source: string) => void;
  root: HTMLElement;
}

interface SlashMenuLike extends HTMLElement {
  open: boolean;
  items: { label: string }[];
  setActiveIndex: (index: number) => void;
}

interface EditorDialogLike extends HTMLElement {
  dialogEl: HTMLDialogElement;
}

interface DropdownLike extends HTMLElement {
  open: boolean;
}

describe('<zn-editor> context menu tools', () => {
  afterEach(() => {
    document.querySelectorAll('zn-slash-menu, zn-editor-dialog').forEach(el => el.remove());
  });

  const editorWithTool = () => fixture<ZnEditor>(html`
    <zn-editor id="test-editor">
      <zn-editor-tool uri="/canned"
                      label="Canned Responses"
                      icon="messages-square@lu"
                      key="canned-responses"
                      context-menu
                      slot="tools"></zn-editor-tool>
    </zn-editor>`);

  const openContextMenu = async (el: ZnEditor): Promise<QuillLike> => {
    const quill = (el as unknown as { quillElement: QuillLike }).quillElement;
    quill.focus();
    quill.insertText(0, '/', 'user');
    quill.setSelection(1, 0, 'user');
    await aTimeout(50);
    return quill;
  };

  const contextMenu = (): SlashMenuLike =>
    document.querySelector('zn-slash-menu') as unknown as SlashMenuLike;

  it('lists a context-menu flagged tool in the slash menu', async () => {
    const el = await editorWithTool();
    await openContextMenu(el);

    const menu = contextMenu();
    expect(menu, 'context menu should exist').to.exist;
    expect(menu.open, 'context menu should be open').to.be.true;

    const labels = menu.items.map(item => item.label);
    expect(labels).to.include('Canned Responses');
  });

  it('opens the tool dialog when the slash menu entry is activated with Enter', async () => {
    const el = await editorWithTool();
    const quill = await openContextMenu(el);

    const menu = contextMenu();
    const index = menu.items.findIndex(item => item.label === 'Canned Responses');
    expect(index).to.be.greaterThan(-1);
    menu.setActiveIndex(index);

    quill.root.dispatchEvent(new KeyboardEvent('keydown', {
      key: 'Enter',
      bubbles: true,
      composed: true,
      cancelable: true,
    }));
    await aTimeout(100);

    const dialog = document.querySelector('zn-editor-dialog') as unknown as EditorDialogLike;
    expect(dialog, 'editor dialog should exist').to.exist;
    expect(dialog.dialogEl.open, 'dialog should be open').to.be.true;
    expect(dialog.innerHTML).to.contain('/canned');
  });

  it('keeps the date picker open when Date is chosen with the mouse', async () => {
    const el = await fixture<ZnEditor>(html`
      <zn-editor id="test-editor" dates></zn-editor>`);
    const quill = await openContextMenu(el);
    quill.insertText(1, 'date', 'user');
    quill.setSelection(5, 0, 'user');
    await aTimeout(50);

    const menu = contextMenu();
    const index = menu.items.findIndex(item => item.label === 'Date');
    expect(index, 'Date should be listed').to.be.greaterThan(-1);

    const button = menu.shadowRoot!.querySelectorAll<HTMLButtonElement>('[data-slash-item]')[index];
    expect(button, 'Date item should be rendered').to.exist;

    const toolbar = el.shadowRoot!.getElementById('toolbar');
    const dateDropdown = toolbar?.shadowRoot?.querySelector('zn-dropdown.toolbar__date-dropdown') as DropdownLike | null;
    const overflowDropdown = toolbar?.shadowRoot?.querySelector('zn-dropdown.toolbar__overflow') as DropdownLike | null;

    button.dispatchEvent(new MouseEvent('mousedown', {bubbles: true, cancelable: true, composed: true}));
    await aTimeout(100);

    expect(dateDropdown?.open || overflowDropdown?.open, 'a dropdown holding the date picker should be open').to.be.true;
  });
});