// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference path="../../../../test/src/custom_typings/chai.d.ts" />
/* eslint-disable no-undef */
import { ZuiButtonDropdown } from '@zywave/zui-button';
import { ZuiIcon } from '@zywave/zui-icons';
import { constructHtml } from '../../../../test/src/util/helpers';
import { assert } from '@esm-bundle/chai';

suite('zui-button-dropdown', () => {
  let element: ZuiButtonDropdown;

  setup(() => {
    element = document.createElement('zui-button-dropdown') as ZuiButtonDropdown;
    document.body.appendChild(element);
  });

  teardown(() => {
    document.body.removeChild(element);
  });

  test('initializes as a ZuiButtonDropdown', () => {
    assert.instanceOf(element, ZuiButtonDropdown);
  });

  test('ZuiButtonDropdown slots text in correctly', async () => {
    const triggerText = 'Captain Beefheart';
    const option1Text = "Sure 'nuff 'n yes I do";
    const option2Text = 'Trout mask replica';
    const option3Text = "I'm so glad";
    const slotString = `
      ${triggerText}
      <button slot="option">${option1Text}</button>
      <a href="#" slot="option">${option2Text}</a>
      <div slot="option">${option3Text}</div>
    `;
    const slot = constructHtml(slotString);
    element.appendChild(slot);
    await element.updateComplete;
    const slottedTriggerText = element.shadowRoot!.querySelector('slot').assignedNodes()[0].textContent.trim();
    const slottedOptionsTextList = (
      element.shadowRoot!.querySelector('slot[name="option"]') as HTMLSlotElement
    ).assignedNodes();
    const slottedOption1Text = (slottedOptionsTextList[0] as HTMLElement).innerText;
    const slottedOption2Text = (slottedOptionsTextList[1] as HTMLElement).innerText;
    const slottedOption3Text = (slottedOptionsTextList[2] as HTMLElement).innerText;
    assert.equal(slottedTriggerText, triggerText);
    assert.equal(slottedOption1Text, option1Text);
    assert.equal(slottedOption2Text, option2Text);
    assert.equal(slottedOption3Text, option3Text);
  });

  test('ZuiButtonDropdown with icon attribute slots in zui-icon properly and does not render chevron icon', async () => {
    const slotString = `<zui-icon icon="zui-more"></zui-icon>`;
    const slot = constructHtml(slotString);
    const chevronIcon = element.shadowRoot!.querySelector('zui-icon');
    element.appendChild(slot);
    element.hasAttribute('icon');
    await element.updateComplete;
    const slottedIcon = element.shadowRoot!.querySelector('slot').assignedNodes()[0];
    assert.isNull(chevronIcon);
    assert.instanceOf(slottedIcon, ZuiIcon);
  });

  test('ZuiButtonDropdown with type also sets it for <zui-button> in shadow DOM', async () => {
    element.setAttribute('type', 'secondary');
    await element.updateComplete;
    const zuiButton = element.shadowRoot!.querySelector('zui-button');
    const zuiButtonTypeVal = zuiButton.getAttribute('type');
    const zuiButtonDropdownTypeVal = element.getAttribute('type');
    assert.equal(zuiButtonTypeVal, zuiButtonDropdownTypeVal);
  });

  test("ZuiButtonDropdown when disabled doesn't open", async () => {
    element.setAttribute('disabled', '');
    await element.updateComplete;
    const shadowButton = element.shadowRoot!.querySelector('zui-button');
    setTimeout(() => {
      (shadowButton as HTMLElement).click();
    }, 1);
    assert.isFalse(element.open);
  });
});