import type { TemplateResult } from 'lit'
import { css, html } from 'lit'
import { property } from 'lit/decorators.js'
import { classMap } from 'lit/directives/class-map.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 { IInsightNotificationCounterVariant } from '../insight-button/model/IInsightButtonProps'
import type { INotificationProps } from './models/INotificationProps'
import UsNotification_css from './styles.pcss'
import vars_css from './vars.pcss'

declare global {
  interface HTMLElementTagNameMap {
    'us-notification': UsNotificaiton
  }
}

@customElementIfNotExist('us-notification')
export class UsNotificaiton extends UsBaseElement implements INotificationProps {
  static styles = [
    UsBaseElement.styles,
    css([vars_css] as TemplateStringsArray | any),
    css([UsNotification_css] as TemplateStringsArray | any),
  ]

  @property({ type: Number }) counter = 0
  @property({ type: String }) variant: IInsightNotificationCounterVariant = IInsightNotificationCounterVariant.COUNTER

  MAX_DISPLAYED_NUMBER = 99

  render(): TemplateResult {
    return html`
      <div class=${this.getNotificationClasses()}>
        ${when(this.variant === IInsightNotificationCounterVariant.COUNTER, () => this.getFormattedCounter())}
      </div>
    `
  }

  getFormattedCounter(): string | number {
    if (this.counter > this.MAX_DISPLAYED_NUMBER)
      return `${this.MAX_DISPLAYED_NUMBER}+`

    return this.counter
  }

  getNotificationClasses(): DirectiveResult<DirectiveClass> {
    return classMap({
      'us-notification': true,
      'us-notification__max-displayed': this.counter > this.MAX_DISPLAYED_NUMBER && this.variant === IInsightNotificationCounterVariant.COUNTER,
      'us-notification__hidden': !this.counter || this.counter <= 0,
      [`us-notification_${this.variant}`]: true,
    })
  }
}