import { html, TemplateResult } from 'lit'
import { DemoPage } from '../../../src/demo/DemoPage.js'
import '../../../src/md/icons/ui-icon.js'
import * as icons from '../../../src/md/icons/Icons.js'
import { IconType } from '../../../src/md/icons/Icons.js'

const ignored: string[] = ['iconWrapper']
const keys = Object.keys(icons) as IconType[]

class ComponentDemoPage extends DemoPage {
  override accessor componentName = 'Icons'

  contentTemplate(): TemplateResult {
    return html`
      <section class="centered large">
        <h2>With "icon" attribute</h2>

        <div class="set">
          ${keys.map((name) => {
            if (ignored.indexOf(name) !== -1) {
              return ''
            }
            return html`
              <span class="container">
                <ui-icon icon="${name}" class="icon"></ui-icon>
                <span>${name}</span>
              </span>
            `
          })}
        </div>

        <h2>With child node</h2>
        <div class="set">
          ${keys.map((name) => {
            if (ignored.indexOf(name) !== -1) {
              return ''
            }
            return html`
              <span class="container">
                <ui-icon class="icon">${icons[name]}</ui-icon>
                <span>${name}</span>
              </span>
            `
          })}
        </div>
      </section>
    `
  }
}

const instance = new ComponentDemoPage()
instance.render()
