import type { TemplateResult } from 'lit'
import { css, html } from 'lit'
import { classMap } from 'lit/directives/class-map.js'
import { property } from 'lit/decorators.js'
import type { DirectiveClass, DirectiveResult } from 'lit/directive.js'
import { UsBaseElement } from '../base/UsBaseElement'
import { customElementIfNotExist } from '../../utils/customElementIfNotExist'
import type { ILabelProps } from './model/ILabelProps'
import UsLabel_css from './styles.pcss'

declare global {
  interface HTMLElementTagNameMap {
    'us-label': UsLabel
  }
}

@customElementIfNotExist('us-label')
export class UsLabel extends UsBaseElement implements ILabelProps {
  static styles = [
    UsBaseElement.styles,
    css([UsLabel_css] as TemplateStringsArray | any),
  ]

  @property({ type: String })
    type: ILabelProps['type'] = 'success'

  @property({ type: String, attribute: 'data-testid', reflect: true })
    dataTestId = 'label'

  render(): TemplateResult {
    return html`
      <div class=${this.getLabelClasses()}>
        <slot name="leadingIcon"></slot>
        <slot></slot>
        <slot name="trailingIcon"></slot>
      </div>
    `
  }

  getLabelClasses(): DirectiveResult<DirectiveClass> {
    return classMap({
      uslabel: true,
      [`uslabel__${this.type}`]: this.type,
    })
  }
}