import { css, html } from 'lit'
import { property } from 'lit/decorators.js'
import { when } from 'lit/directives/when.js'
import { UsBaseElement } from '../base/UsBaseElement'
import { customElementIfNotExist } from '../../utils/customElementIfNotExist'
import type { TIconsStorageKeys } from '../icon/iconsStorage'
import type { AlertVariants, IAlertProps } from './model/IAlertProps'
import UsAlert_css from './alert.pcss'
import vars_css from './vars.pcss'

declare global {
  interface HTMLElementTagNameMap {
    'us-alert': UsAlert
  }
}

@customElementIfNotExist('us-alert')
export class UsAlert extends UsBaseElement implements IAlertProps {
  static styles = [
    UsBaseElement.styles,
    css([vars_css] as TemplateStringsArray | any),
    css([UsAlert_css] as TemplateStringsArray | any),
  ]

  @property({ type: String }) variant: AlertVariants = 'info'
  @property({ type: String }) description = ''
  @property({ type: String }) link = ''
  @property({ type: String }) linkTitle = ''
  @property({ type: Boolean }) linkIsDisabled = false
  @property({ type: Boolean }) show = false
  @property({ type: String }) icon: TIconsStorageKeys | '' = ''
  @property({ type: String, attribute: 'data-testid', reflect: true })
    dataTestId = 'alert'

  render() {
    return html`
      ${when(this.show,
        () => html`
        <div class="alert-wrapper ${this.variant}">
          <div class="alert-content">
            <div class=left>
              <us-icon size="md" name="${this.getIconName(this.variant)}" color="${this.getIconColor(this.variant)}"></us-icon>
              <div class="description">
                <slot>${this.description}</slot>
                ${when(this.link !== '', () => html`<a class="link ${this.linkIsDisabled ? 'disabled' : ''}" href=${this.link} target="_blank">${this.linkTitle}</a>`)}
              </div>
            </div>
          </div>
      </div>
      `)}
    `
  }

  getIconName(variant: AlertVariants) {
    if (this.icon)
      return this.icon

    switch (variant) {
      case 'info':
        return 'info-solid'
      case 'success':
        return 'circle-check-solid'
      case 'warning':
        return 'triangle-exclamation-solid'
      case 'danger':
        return 'circle-exclamation-solid'
    }
  }

  getIconColor(variant: AlertVariants) {
    switch (variant) {
      case 'info':
        return 'var(--alert-info-icon-color)'
      case 'success':
        return 'var(--alert-success-icon-color)'
      case 'warning':
        return 'var(--alert-warning-icon-color)'
      case 'danger':
        return 'var(--alert-danger-icon-color)'
    }
  }
}