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 { when } from 'lit/directives/when.js'
import { UsBaseElement } from '../base/UsBaseElement'
import { customElementIfNotExist } from '../../utils/customElementIfNotExist'
import type { IBadgeContrasts, IBadgeProps, IBadgeStatuses } from './model/IBadgeProps'
import UsBadge_css from './styles.pcss'
import vars_css from './vars.pcss'

// import '../icon/UsIcon'
import '../tooltip/UsTooltip'

declare global {
  interface HTMLElementTagNameMap {
    'us-badge': UsBadge
  }
}

@customElementIfNotExist('us-badge')
export class UsBadge extends UsBaseElement implements IBadgeProps {
  static styles = [
    UsBaseElement.styles,
    css([vars_css] as TemplateStringsArray | any),
    css([UsBadge_css] as TemplateStringsArray | any),
  ]

  @property({ type: String })
    contrast: IBadgeContrasts = 'high'

  @property({ type: String })
    status: IBadgeStatuses = 'primary'

  @property({ type: String, attribute: 'icon' })
    iconName = ''

  @property({ type: String })
    tooltipText = ''

  @property({ type: String })
    widgetView = ''

  @property({ type: Boolean })
    round = false

  render(): TemplateResult {
    return html`
      <div class=${this.getBadgeClasses()}>
        <slot></slot>

        ${html`
          <slot name="trailingIcon">
            ${when(this.iconName && !this.tooltipText, () => html`
              <us-icon class="usbadge__icon" name=${this.iconName} size="sm"></us-icon>
            `)}
            ${when(this.tooltipText, () => html`
              <us-tooltip corner="top-end" showArrow widgetView=${this.widgetView}>
                <div class="usbadge_activator" slot="activator">
                  <us-icon
                    class="usbadge_tooltip_icon"
                    size="sm"
                    name="info"
                    ariaLabel="tooltip"
                  ></us-icon>
                </div>
                <p class="usbadge_tooltip" slot="content">${this.tooltipText}</p>
              </us-tooltip>
            `)}
          </slot>
        `}
      </div>
    `
  }

  getBadgeClasses(): DirectiveResult<DirectiveClass> {
    return classMap({
      usbadge: true,
      [`usbadge_${this.contrast}-contrast`]: this.contrast,
      [`usbadge_${this.status}-status`]: this.status,
      usbadge_round: this.round,
    })
  }
}