// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference path="../../../../test/src/custom_typings/chai.d.ts" />
/* eslint-disable no-undef */
import { ZuiErrorPage } from '@zywave/zui-error-page';
import { assert } from '@esm-bundle/chai';
import { awaitEvent } from '../../../../test/src/util/helpers';
import type { ZuiErrorPageError } from '@zywave/zui-error-page';

const supportedErrorCodes: ZuiErrorPageError[] = ['401', '403', '404', '500'];

suite('zui-error-page', () => {
  let element: ZuiErrorPage;

  setup(() => {
    element = document.createElement('zui-error-page') as ZuiErrorPage;
    document.body.appendChild(element);
  });

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

  test('initializes an instance of ZuiErrorPage', () => {
    assert.instanceOf(element, ZuiErrorPage);
  });

  for (const errorCode of supportedErrorCodes) {
    test(`SVG rendered, based on an error attribute value of... ${errorCode}`, async () => {
      element.error = errorCode;
      await awaitEvent(element, 'svg-load');
      const shadowSvgEl = element.shadowRoot!.querySelector('svg');
      assert.exists(shadowSvgEl, `for error=${errorCode}, an SVG element was not found within the shadow DOM`);
    });
  }

  test('attributes when empty do not render shadow DOM template element(s)', async () => {
    element.error = null;
    await element.updateComplete;
    const shadowSvgEl = element.shadowRoot!.querySelector('svg');
    const shadowHeaderEl = element.shadowRoot!.querySelector('h1.header');
    const shadowSubheaderEl = element.shadowRoot!.querySelector('h2.subheader');
    const shadowMessageEl = element.shadowRoot!.querySelector('p.message');
    assert.isNull(shadowSvgEl, 'SVG element rendered in template');
    assert.isNull(shadowHeaderEl, 'Header element rendered in template');
    assert.isNull(shadowSubheaderEl, 'Subheader element rendered in template');
    assert.isNull(shadowMessageEl, 'Message element rendered in template');
  });

  test('text attributes properly render', async () => {
    element.header = 'Feed your head';
    element.subheader = 'Sub sandwich header';
    element.message = 'Message in a bottle';
    await element.updateComplete;
    const queryShadowClass = (clazz: string): HTMLElement => element.shadowRoot!.querySelector(clazz);
    const shadowElText = (clazz: string): string => queryShadowClass(clazz).innerText;
    assert.equal(shadowElText('.header'), element.header, 'Header text was not properly set');
    assert.equal(shadowElText('.subheader'), element.subheader, 'Subheader text was not properly set');
    assert.equal(shadowElText('.message'), element.message, 'Message text was not properly set');
  });

  test('message attribute supports HTML as a value', async () => {
    element.message = `<em>I am emphasized</em>`;
    await element.updateComplete;
    const shadowMessageHtmlValue = element.shadowRoot!.querySelector('p.message em');
    assert.equal(shadowMessageHtmlValue.tagName, 'EM');
  });

  test('non supported error types, behave as intended', async () => {
    element.setAttribute('error', '666');
    await element.updateComplete;
    const shadowSvgEl = element.shadowRoot!.querySelector('svg');
    assert.isNull(shadowSvgEl);
  });
});