import { expect, fixture } from '@open-wc/testing';
import { html } from '@lion/core';

import { deepContains } from '../../src/utils/deep-contains.js';

describe('deepContains()', () => {
  it('returns true if element contains a target element with a shadow boundary in between', async () => {
    const shadowElement = /** @type {HTMLElement} */ (await fixture('<div id="shadow"></div>'));
    const shadowRoot = shadowElement.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
      <button id="el-1">Button</button>
      <a id="el-2" href="#foo">Href</a>
      <input id="el-3">
    `;
    const shadowElementChild = /** @type {HTMLElement} */ (shadowRoot.querySelector('#el-1'));
    const element = /** @type {HTMLElement} */ (await fixture(html`
      <div id="light">
        ${shadowElement}
        <button id="light-el-1"></button>
      </div>
    `));
    const lightChildEl = /** @type {HTMLElement} */ (element.querySelector('#light-el-1'));

    expect(deepContains(element, element)).to.be.true;
    expect(deepContains(element, shadowElement)).to.be.true;
    expect(deepContains(element, shadowElementChild)).to.be.true;
    expect(deepContains(element, lightChildEl)).to.be.true;
    expect(deepContains(shadowElement, shadowElement)).to.be.true;
    expect(deepContains(shadowElement, shadowElementChild)).to.be.true;
    expect(deepContains(shadowRoot, shadowElementChild)).to.be.true;

    // Siblings
    expect(deepContains(element.firstElementChild, element.lastElementChild)).to.be.false;
    // Unrelated
    expect(deepContains(lightChildEl, shadowElementChild)).to.be.false;
  });

  it('returns true if element contains a target element with a shadow boundary in between, for multiple shadowroots', async () => {
    const shadowElement = /** @type {HTMLElement} */ (await fixture('<div id="shadow"></div>'));
    const shadowRoot = shadowElement.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
      <button id="el-1">Button</button>
      <a id="el-2" href="#foo">Href</a>
      <input id="el-3">
    `;

    const shadowElement2 = /** @type {HTMLElement} */ (await fixture('<div id="shadow2"></div>'));
    const shadowRoot2 = shadowElement2.attachShadow({ mode: 'open' });
    shadowRoot2.innerHTML = `
      <button id="el-1">Button</button>
      <a id="el-2" href="#foo">Href</a>
      <input id="el-3">
    `;

    const shadowElementChild = /** @type {HTMLElement} */ (shadowRoot.querySelector('#el-2'));
    const shadowElementChild2 = /** @type {HTMLElement} */ (shadowRoot2.querySelector('#el-2'));
    const element = /** @type {HTMLElement} */ (await fixture(html`
      <div id="light">
        ${shadowElement} ${shadowElement2}
        <button id="light-el-1"></button>
      </div>
    `));

    expect(deepContains(element, shadowElementChild)).to.be.true;
    expect(deepContains(shadowElement, shadowElementChild)).to.be.true;
    expect(deepContains(shadowRoot, shadowElementChild)).to.be.true;

    expect(deepContains(element, shadowElementChild2)).to.be.true;
    expect(deepContains(shadowElement2, shadowElementChild2)).to.be.true;
    expect(deepContains(shadowRoot2, shadowElementChild2)).to.be.true;
  });

  it('can detect containing elements inside multiple nested shadow roots', async () => {
    const shadowNestedElement = await fixture('<div id="shadow-nested"></div>');
    const shadowNestedRoot = shadowNestedElement.attachShadow({ mode: 'open' });
    shadowNestedRoot.innerHTML = `
      <button id="nested-el-1">Button</button>
      <a id="nested-el-2" href="#foo">Href</a>
      <input id="nested-el-3">
    `;

    const shadowElement = /** @type {HTMLElement} */ (await fixture('<div id="shadow"></div>'));
    const shadowRoot = shadowElement.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
      <button id="el-1">Button</button>

      <input id="el-3">
    `;
    shadowRoot.insertBefore(shadowNestedElement, shadowRoot.lastElementChild);

    const element = /** @type {HTMLElement} */ (await fixture(html`
      <div id="light">
        ${shadowElement}
        <button id="light-el-1"></button>
      </div>
    `));

    expect(deepContains(element, element.firstElementChild)).to.be.true;
    expect(deepContains(element, element.firstElementChild.shadowRoot)).to.be.true;
    expect(deepContains(element, element.firstElementChild.shadowRoot.children[1])).to.be.true;
    expect(deepContains(element, element.firstElementChild.shadowRoot.children[1].shadowRoot)).to.be
      .true;
    expect(
      deepContains(
        element,
        element.firstElementChild.shadowRoot.children[1].shadowRoot.lastElementChild,
      ),
    ).to.be.true;
  });
});