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 { TIconsStorageKeys } from '../icon/iconsStorage'
import type { ITrendProps, ITrendVariants } from './models/ITrendProps'
import UsTrend_css from './styles.pcss'
import vars_css from './vars.pcss'

// import '../icon/UsIcon'

declare global {
  interface HTMLElementTagNameMap {
    'us-trend': UsTrend
  }
}

@customElementIfNotExist('us-trend')
export class UsTrend extends UsBaseElement implements ITrendProps {
  static styles = [
    UsBaseElement.styles,
    css([vars_css] as TemplateStringsArray | any),
    css([UsTrend_css] as TemplateStringsArray | any),
  ]

  @property({ type: String })
    trend: ITrendVariants = 'up'

  render(): TemplateResult {
    return html`
      <div class=${this.getTrendClasses()}>
        <us-icon class="ustrend__icon" name=${this.getIconName()} size="sm"></us-icon>
        <slot></slot>
      </div>
    `
  }

  getTrendClasses(): DirectiveResult<DirectiveClass> {
    return classMap({
      ustrend: true,
      [`ustrend_${this.trend}`]: this.trend,
    })
  }

  getIconName(): TIconsStorageKeys {
    if (this.trend === 'up')
      return 'arrow-trend-up'

    return 'arrow-trend-down'
  }
}