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

suite('zui-icons', () => {
  let element: ZuiIcon;
  const svgCategories: SVGCategoryType[] = ['fs', 'nav', 'shell', 'system'];

  setup(() => {
    element = document.createElement('zui-icon') as ZuiIcon;
    element.setAttribute('icon', 'zui-nav-accounts');
    element.classList.add('small');

    document.body.appendChild(element);
  });

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

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

  for (const cat of svgCategories) {
    test(`category 'zui-${cat}.svg' properly loads`, async () => {
      const iconTestList = {
        fs: 'zui-fs-audio',
        nav: 'zui-nav-accounts',
        shell: 'zui-shell-apps',
        system: 'zui-action-items-add',
      };
      element.setAttribute('icon', iconTestList[cat]);
      await element.updateComplete;
      await awaitEvent(element, 'load');
      const svgFile = document.head.querySelector(`[data-icons-container='${cat}']`);
      const svgIcon = svgFile.querySelector(`#${iconTestList[cat]}`);
      assert.exists(svgIcon);
    });
  }
});