// eslint-disable-next-line max-classes-per-file
import { html, LitElement, css } from 'lit';
import '../src/ix-tooltip.js';

class FancyTooltip extends LitElement {
  static styles = css`
    :host {
      background: white;
      border: 1px solid gray;
      box-shadow: 0 0 6px black;
      display: block;
      padding: 4px;
    }
  `;

  render() {
    return html`<slot></slot>`;
  }
}

window.customElements.define('fancy-tooltip', FancyTooltip);

export class IxTooltipTestHarness extends LitElement {
  protected createRenderRoot(): HTMLElement | ShadowRoot {
    return this;
  }

  handleFancyMouseOver(e: Event) {
    document.dispatchEvent(
      new CustomEvent('show-tooltip', {
        detail: {
          target: e.target,
          tooltip: html`<fancy-tooltip
            ><h2>Some fancy title</h2>
            <p>Some fancy description in a paragraph</p>
            <br /><a href="#">Some fancy link</a></fancy-tooltip
          >`,
        },
      }),
    );
  }

  render() {
    return html`
      <a
        href="#"
        data-tooltip="tooltip text first element"
        aria-describedby="tooltip"
      >
        first link element
      </a>
      <br />
      <br />
      <a
        href="#"
        data-tooltip="tooltip text second element"
        aria-describedby="tooltip"
      >
        second link element
      </a>
      <br />
      <br />
      <a
        href="#"
        aria-describedby="tooltip"
        @mouseover=${this.handleFancyMouseOver}
      >
        A more complicated tooltip
      </a>
      <ix-tooltip> </ix-tooltip>
    `;
  }
}

window.customElements.define('ix-tooltip-test-harness', IxTooltipTestHarness);