import { html } from 'lit';
import { fixture, expect, aTimeout } from '@open-wc/testing';
import { sendKeys, sendMouse, resetMouse } from '@web/test-runner-commands';
import './ix-tooltip-test-harness.js';
import type { IxTooltipTestHarness } from './ix-tooltip-test-harness.js';
import { IxTooltip } from '../src/IxTooltip.js';

function getMiddleOfElement(element: HTMLElement) {
  const { x, y, width, height } = element.getBoundingClientRect();

  return {
    x: Math.floor(x + window.scrollX + width / 2),
    y: Math.floor(y + window.scrollY + height / 2),
  };
}

describe('IxTooltip', () => {
  let harnessEl: IxTooltipTestHarness;
  let tooltipEl: IxTooltip;

  beforeEach(async () => {
    harnessEl = await fixture<IxTooltipTestHarness>(html`
      <ix-tooltip-test-harness></ix-tooltip-test-harness>
    `);

    tooltipEl = <IxTooltip>harnessEl.querySelector('ix-tooltip');
  });

  afterEach(async () => {
    await resetMouse();
  });

  it('renders the test harness element and its DOM', async () => {
    expect(harnessEl).to.exist;
    expect(harnessEl.innerHTML).to.exist;
  });

  it('renders the tooltip and its shadowDOM', async () => {
    expect(tooltipEl).to.exist;
    expect(tooltipEl.shadowRoot).to.exist;
  });

  it('shows a tooltip on element tab focus, removes on esc', async () => {
    harnessEl.focus();
    await sendKeys({
      press: 'Tab',
    });

    let toolTipText = document.activeElement?.getAttribute('data-tooltip');
    expect(toolTipText).to.equal('tooltip text first element');
    expect(
      tooltipEl.shadowRoot?.querySelector('ix-simple-tooltip')?.innerHTML,
    ).to.contain(toolTipText);

    await sendKeys({
      press: 'Tab',
    });

    toolTipText = document.activeElement?.getAttribute('data-tooltip');
    expect(toolTipText).to.equal('tooltip text second element');
    expect(
      tooltipEl.shadowRoot?.querySelector('ix-simple-tooltip')?.innerHTML,
    ).to.contain(toolTipText);

    await sendKeys({
      press: 'Escape',
    });

    expect(tooltipEl.shadowRoot?.querySelector('ix-simple-tooltip')).to.be.null;
  });

  it('shows a tooltip on element mouse over, remove on mouse out', async () => {
    const triggerEls = harnessEl.querySelectorAll(
      '[data-tooltip]',
    ) as unknown as HTMLElement[];

    let { x, y } = getMiddleOfElement(triggerEls[0]);
    await sendMouse({ type: 'move', position: [x, y] });

    let toolTipText = triggerEls[0].getAttribute('data-tooltip');
    expect(toolTipText).to.equal('tooltip text first element');
    expect(
      tooltipEl.shadowRoot?.querySelector('ix-simple-tooltip')?.innerHTML,
    ).to.contain(toolTipText);

    ({ x, y } = getMiddleOfElement(triggerEls[1]));
    await sendMouse({ type: 'move', position: [x, y] });

    toolTipText = triggerEls[1].getAttribute('data-tooltip');
    expect(toolTipText).to.equal('tooltip text second element');
    expect(
      tooltipEl.shadowRoot?.querySelector('ix-simple-tooltip')?.innerHTML,
    ).to.contain(toolTipText);

    await sendMouse({ type: 'move', position: [500, 500] });

    expect(tooltipEl.shadowRoot?.querySelector('.wrapper')).to.have.class(
      'hidding',
    );

    await aTimeout(500);

    expect(tooltipEl.shadowRoot?.querySelector('.wrapper')).to.not.have.class(
      'hidding',
    );

    expect(tooltipEl.shadowRoot?.querySelector('ix-simple-tooltip')).to.be.null;
  });
});