import { css, html, nothing } from 'lit'
import { property } from 'lit/decorators.js'
import { when } from 'lit/directives/when.js'
import { classMap } from 'lit/directives/class-map.js'
import type { DirectiveClass, DirectiveResult } from 'lit/directive'
import { customElementIfNotExist } from '../../utils/customElementIfNotExist'
import { UsBaseElement } from '../base/UsBaseElement'
import type { TIconsStorageKeys } from '../icon/iconsStorage'
import type { IModalHeaderProps } from './model/IModalHeaderProps'
import { EnumModalHeaderTypes } from './model/IModalHeaderProps'
import UsModalHeader_css from './styles.pcss'

// import '../icon/UsIcon'

declare global {
  interface HTMLElementTagNameMap {
    'us-modal-header': UsModalHeader
  }
}

@customElementIfNotExist('us-modal-header')
export class UsModalHeader extends UsBaseElement implements IModalHeaderProps {
  static styles = [
    UsBaseElement.styles,
    css([UsModalHeader_css] as TemplateStringsArray | any),
  ]

  @property({ type: String }) headerTitle = ''
  @property() type: EnumModalHeaderTypes = EnumModalHeaderTypes.DEFAULT
  @property({ type: String }) headerDescription = ''
  @property({ type: Boolean }) headerInPopup = false
  @property({ type: String, attribute: 'data-testid', reflect: true }) dataTestId = 'header'

  render() {
    return html`
      <div class="${this.getModalHeaderClasses()}">
        <div class="us-modal-header__content">
          ${when(this.type !== 'default', () => html`
            <div class="us-modal-header__icon us-modal-header__icon_${this.type}">
              <us-icon name=${this.getIconName()}></us-icon>
            </div>
          `)}
          <h3 class="us-modal-header__title">
            ${this.headerTitle}
          </h3>
          ${when(this.headerDescription, () => html`
            <p class="us-modal-header__description">
              ${this.headerDescription}
            </p>
          `, () => nothing)}
        </div>
      </div>
    `
  }

  getIconName(): TIconsStorageKeys | undefined {
    switch (this.type) {
      case EnumModalHeaderTypes.SUCCESS:
        return 'circle-check'

      case EnumModalHeaderTypes.ERROR:
        return 'circle-exclamation'

      case EnumModalHeaderTypes.WARNING:
        return 'triangle-exclamation'

      case EnumModalHeaderTypes.INFO:
        return 'circle-info'

      default:
        return undefined
    }
  }

  getModalHeaderClasses(): DirectiveResult<DirectiveClass> {
    return classMap({
      'us-modal-header': true,
      'us-modal-header_in-popup': this.headerInPopup,
    })
  }
}