import * as plugins from './plugins.js';

export type TDocsIconName =
  | 'menu'
  | 'search'
  | 'sun'
  | 'moon'
  | 'repository'
  | 'close'
  | 'chevron'
  | 'check'
  | 'overview'
  | 'start'
  | 'concepts'
  | 'integrations'
  | 'api'
  | 'operations'
  | 'book'
  | 'file'
  | 'heading'
  | 'enter'
  | 'warning';

export const docsIcons: Record<TDocsIconName, plugins.IconNode> = {
  menu: plugins.Menu,
  search: plugins.Search,
  sun: plugins.Sun,
  moon: plugins.Moon,
  repository: plugins.GitBranch,
  close: plugins.X,
  chevron: plugins.ChevronDown,
  check: plugins.Check,
  overview: plugins.Compass,
  start: plugins.Rocket,
  concepts: plugins.Layers,
  integrations: plugins.Plug,
  api: plugins.CodeXml,
  operations: plugins.Server,
  book: plugins.BookOpen,
  file: plugins.FileText,
  heading: plugins.Heading,
  enter: plugins.CornerDownLeft,
  warning: plugins.TriangleAlert,
};

export class TsdocIcon extends HTMLElement {
  private iconNode?: plugins.IconNode;

  public get icon(): plugins.IconNode | undefined {
    return this.iconNode;
  }

  public set icon(iconNodeArg: plugins.IconNode | undefined) {
    this.iconNode = iconNodeArg;
    this.replaceChildren();
    if (!iconNodeArg) return;

    this.append(plugins.createElement(iconNodeArg, {
      'aria-hidden': 'true',
      focusable: 'false',
    }));
  }
}

if (!customElements.get('tsdoc-icon')) {
  customElements.define('tsdoc-icon', TsdocIcon);
}