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'
import { customElementIfNotExist } from '../../../utils/customElementIfNotExist'
import { UsBaseElement } from '../../base/UsBaseElement'
import { parseNumberFromString } from '../../../utils/parseNumberFromString'
import type { IDetailedCard } from '../models/IDetailedCard'
import UsDetailedCard_css from './detailCard.pcss'

declare global {
  interface HTMLElementTagNameMap {
    'us-detailed-card': UsDetailedCard
  }
}

@customElementIfNotExist('us-detailed-card')
export class UsDetailedCard extends UsBaseElement {
  static styles = [
    UsBaseElement.styles,
    css([UsDetailedCard_css] as TemplateStringsArray | any),
  ]

  @property({ type: Object }) card: IDetailedCard = {} as IDetailedCard
  @property({ type: Boolean }) isIgnored = false

  render() {
    return html`
      <div class="detailed-card">
        <div class="${this.getDetailCardClasses()}">
          <slot name="caption"></slot>
          <div class="${this.getAmountClasses()}">
            ${this.card.amount}
          </div>
          <p class="detailed-card__title">
            ${this.card?.title}
          </p>
          <p class="detailed-card__subtitle">
            ${this.card.subtitle}
          </p>
        </div>
        <slot name="additional"></slot>
      </div>
    `
  }

  getDetailCardClasses(): DirectiveResult<DirectiveClass> {
    return classMap({
      'detailed-card__wrapper': true,
      'detailed-card_ignored': this.isIgnored,
    })
  }

  getAmountClasses(): DirectiveResult<DirectiveClass> {
    const amount = parseNumberFromString(this.card.amount)

    return classMap({
      'detailed-card__amount': true,
      'amount_positive': amount > 0,
      'amount_negative': amount < 0,
    })
  }
}