import { css, html } from 'lit'
import { property } from 'lit/decorators.js'
import { when } from 'lit/directives/when.js'
import { UsBaseElement } from '../../components/base/UsBaseElement'
import { customElementIfNotExist } from '../../utils/customElementIfNotExist'
import { localizeManager, localized } from '../../dependencies'
import { dispatchCustomEvent } from '../../utils/dispatchCustomEvent'
import type { TIconsStorageKeys } from '../../components/icon/iconsStorage'
import style_css from './styles.pcss'
import type { IErrorScreen } from './model/IErrorScreen'

import '../../components/empty-state/UsEmptyState'
import '../../components/button/UsButton'
import '../../components/icon/UsIcon'

declare global {
  interface HTMLElementTagNameMap {
    'us-error-screen': USErrorScreen
  }
}

@customElementIfNotExist('us-error-screen')
@localized()
export class USErrorScreen extends UsBaseElement implements IErrorScreen {
  static styles = [
    UsBaseElement.styles,
    css([style_css] as TemplateStringsArray | any),
  ]

  @property({ type: String }) widgetView = 'vertical' as const
  @property({ type: String }) title = ''
  @property({ type: String }) description = ''
  @property({ type: String }) actionText = ''
  @property({ type: String }) actionIconName: TIconsStorageKeys | null = null
  @property({ type: Boolean }) readonly = false

  render() {
    return html`
      <div class="error-screen ${this.widgetView}">
        <us-empty-state
          .title=${this.title || localizeManager.error_sceen_title()}
          .description=${this.description || localizeManager.error_screen_description()}
        >
          <us-button
            slot="actions"
            class="error-screen__action"
            ?disabled=${this.readonly}
            @click="${this.handleAction}"
          >
            ${when(this.actionIconName, () => html`<us-icon slot='leadingIcon' size="sm" name=${this.actionIconName}></us-icon>`)}
            ${this.actionText || localizeManager.try_again()}
          </us-button>
        </us-empty-state>

        <slot name="additionalActions"></slot>
      </div>
    `
  }

  handleAction() {
    dispatchCustomEvent('action', true, this, false, false)
  }
}