import { css, html } from 'lit'
import { property } from 'lit/decorators.js'
import { when } from 'lit/directives/when.js'
import { map } from 'lit/directives/map.js'
import { customElementIfNotExist } from '../../utils/customElementIfNotExist'
import { UsBaseElement } from '../base/UsBaseElement'
import type { IBadgeGroup } from './models/IBadgesGroup'
import type { IBadgeGroupItem } from './models/IBadgeGroupItem'
import BadgeGroup_css from './badgeGroup.pcss'
import '../badge/UsBadge'
import '../icon/UsIcon'

declare global {
  interface HTMLElementTagNameMap {
    'us-badge-group': UsBadgeGroup
  }
}

@customElementIfNotExist('us-badge-group')
export class UsBadgeGroup extends UsBaseElement implements IBadgeGroup {
  static styles = [
    UsBaseElement.styles,
    css([BadgeGroup_css] as TemplateStringsArray | any),
  ]

  @property({ type: Array }) badgeGroup: IBadgeGroupItem[] = []
  @property({ type: Object }) iconInGroup: IBadgeGroup['iconInGroup'] = {} as IBadgeGroup['iconInGroup']
  @property({ type: Boolean }) isIgnored = false

  render() {
    return html`
      <div class="badge-group">
        ${when(this.isIconGroupDisplayed(), () => this.renderIconGroup())}
        ${map(this.badgeGroup, (badge: IBadgeGroupItem) => this.renderBadgeItem(badge))}
      </div>
    `
  }

  renderIconGroup() {
    if (this.iconInGroup) {
      return html`
        <us-icon
          name="${this.iconInGroup.iconName}"
          size="${this.iconInGroup.size || 'sm'}"
          iconTitle="${this.iconInGroup.iconTitle || this.iconInGroup.iconName}"
          ariaLabel="${this.iconInGroup.ariaLabel || this.iconInGroup.iconName}"
          color="${this.iconInGroup.color || 'var(--color-text-700)'}"
        ></us-icon>
      `
    }

    return null
  }

  renderBadgeItem(badge: IBadgeGroupItem) {
    const status = this.isIgnored ? 'neutral' : badge.status
    const iconName = badge.iconName ? badge.iconName : ''

    return html`
      <us-badge contrast="${badge.contrast}" status="${status}" iconName="${iconName}">
        ${badge.text}
      </us-badge>
    `
  }

  isIconGroupDisplayed() {
    return this.iconInGroup && Object.keys(this.iconInGroup).length > 0
  }
}