import type { TemplateResult } from 'lit'
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 { dispatchCustomEvent } from '../../utils/dispatchCustomEvent'
import type { IFooterProps } from './model/IFooterProps'
import UsFooter_css from './styles.pcss'
import vars_css from './vars.pcss'

import '../button/UsButton'
declare global {
  interface HTMLElementTagNameMap {
    'us-footer': UsFooter
  }
}

@customElementIfNotExist('us-footer')
export class UsFooter extends UsBaseElement implements IFooterProps {
  static styles = [
    UsBaseElement.styles,
    css([vars_css] as TemplateStringsArray | any),
    css([UsFooter_css] as TemplateStringsArray | any),
  ]

  @property({ type: String }) widgetView: IFooterProps['widgetView'] = 'vertical'
  @property({ type: Boolean }) showPrimaryButton!: boolean
  @property({ type: String }) primaryButtonLabel!: string
  @property({ type: String }) primaryButtonIcon!: string
  @property({ type: Boolean }) showSecondaryButton!: boolean
  @property({ type: String }) secondaryButtonLabel!: string
  @property({ type: String }) secondaryButtonIcon!: string
  @property({ type: Boolean }) showContentSlot!: boolean
  @property({ type: Boolean }) showBeforeContentSlot!: boolean
  @property({ type: Boolean }) isPrimaryButtonDisabled = false
  @property({ type: Boolean }) isSecondaryButtonDisabled = false
  @property({ type: Boolean }) secondaryLoading = false
  @property({ type: Boolean }) primaryLoading = false
  @property({ type: String }) variant: IFooterProps['variant'] = 'default'

  render(): TemplateResult {
    return html`
      <div class="us-footer ${this.widgetView} ${this.variant === 'left-side' ? 'us-footer_left' : ''}">
        <slot name="beforeContent"></slot>
        ${when(this.showContentSlot || this.showPrimaryButton || this.showSecondaryButton,
          () => html`
            <div class="us-footer__container">
              ${when(this.showSecondaryButton || this.showPrimaryButton, () => html`
                <div class="us-footer__buttons">
                  ${when(this.showSecondaryButton, () => html`
                    <us-button
                      full
                      .iconName=${this.secondaryButtonIcon}
                      title=${this.secondaryButtonLabel}
                      ?disabled=${this.isSecondaryButtonDisabled}
                      variant="secondary"
                      ?loading=${this.secondaryLoading}
                      class="us-footer__button ${this.showPrimaryButton ? '' : 'us-footer__button_alone'}"
                      @click=${this.secondaryButtonClick}
                    >
                      <span class="us-footer__button-text">${this.secondaryButtonLabel}</span>
                    </us-button>
                  `)}
                  ${when(this.showPrimaryButton, () => html`
                    <us-button
                      full
                      .iconName=${this.primaryButtonIcon}
                      .title=${this.primaryButtonLabel}
                      ?disabled=${this.isPrimaryButtonDisabled}
                      variant="primary"
                      ?loading=${this.primaryLoading}
                      class="us-footer__button ${this.showSecondaryButton ? '' : 'us-footer__button_alone'}"
                      @click=${this.primaryButtonClick}
                    >
                      <span class="us-footer__button-text">${this.primaryButtonLabel}</span>
                    </us-button>
                  `)}
                </div>
              `)}

              ${when(this.showContentSlot, () => html`
                <div class="us-footer__content">
                  <slot 
                    class="us-footer__content" 
                    tabindex="${this.widgetView.includes('vertical') ? '0' : '1'}"
                  ></slot>
                </div>
              `)}
            </div>
          `,
        )}
        <slot name="afterContent"></slot>
      </div>
    `
  }

  primaryButtonClick() {
    dispatchCustomEvent('primaryButtonClick', true, this, false, false)
  }

  secondaryButtonClick() {
    dispatchCustomEvent('secondaryButtonClick', true, this, false, false)
  }
}