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 { localizeManager, localized } from '../../dependencies'
import { dispatchCustomEvent } from '../../utils/dispatchCustomEvent'
import type { IFeedbackReason } from './model/IFeedbackReason'
import type { IFeedbackReasonSendEvent } from './model/IFeedbackReasonSendEvent'
import style_css from './styles.pcss'

import '../popup/UsPopup'
import '../loader/UsLoader'
import '../footer/UsFooter'
import '../form/input/UsInput'

declare global {
  interface HTMLElementTagNameMap {
    'us-feedback-popup': USFeedbackPopup
  }
}

@customElementIfNotExist('us-feedback-popup')
@localized()
export class USFeedbackPopup extends UsBaseElement {
  static styles = [
    UsBaseElement.styles,
    css([style_css] as TemplateStringsArray | any),
  ]

  @property({ type: Array }) reasons: IFeedbackReason[] = []
  @property({ type: String }) reasonText = ''
  @property({ type: String }) description = ''
  @property({ type: String }) reasonLabel = ''
  @property({ type: Boolean }) loading = false
  @property({ type: Boolean }) overlay = false
  @property({ type: Boolean }) transparent = false
  @property({ type: Boolean }) show = false
  @property({ type: Boolean }) showReasonText = false
  @property({ type: String }) headerTitle = ''

  maxReasonTextLength = 800

  render() {
    return html`
      <us-popup
        tabindex="-1"
        class="feedback-popup"
        width="376px"
        height="100%"
        ?overlay=${this.overlay}
        ?transparent=${this.transparent}
        scrollable
        position="right"
        hideCloseButton
        alternativeHeader
        variant="preview"
        name=${this.headerTitle}
        ?show=${this.show}
        @back="${this.handleClose}"
      >
        <div class="feedback-popup__container">
          ${when(this.loading, () => html`
            <us-loader
              class="feedback-popup__loader"
              type="infinity" 
            ></us-loader>
          `, () => html`
            <div class="feedback-popup__content">
              <p class="feedback-popup__title">
                ${this.description}
              </p>

              ${this.renderReasons()}

              ${when(this.showReasonText, () => html`
                <us-input
                  name="description"
                  textArea
                  showCounter
                  .maxLength=${this.maxReasonTextLength}
                  value=${this.reasonText}
                  label=${this.reasonLabel}
                  placeholder=${localizeManager.feedback_description_placeholder()}
                  @input=${this.handleDescriptionInput}
                ></us-input>
              `)}
            </div>
          `)}
        </div>

        ${when(!this.loading, () => html`
          <us-footer
            slot="afterContent"
            showPrimaryButton
            primaryButtonLabel="${localizeManager.feedback_primary_button()}"
            secondaryButtonLabel="${localizeManager.feedback_secondary_button()}"
            ?isPrimaryButtonDisabled=${this.isSendButtonDisabled()}
            @primaryButtonClick="${this.handleSend}"
            @secondaryButtonClick="${this.handleClose}"
          ></us-footer>
        `)}
      </us-popup>
    `
  }

  renderReasons() {
    return html`
      <div class="feedback-popup__reasons">
        ${this.reasons.map(checkbox => html`
          <us-checkbox
            .checkboxSettings="${checkbox}"
            ?checked="${checkbox.checked}"
            @change="${this.handleReasonCheckboxChange}"
          ></us-checkbox>
        `)}
      </div>
    `
  }

  handleReasonCheckboxChange({ target }) {
    const id = target.checkboxSettings.id || target.renderRoot.activeElement.id

    this.reasons = this.reasons.map((item) => {
      if (item.id === id)
        item.checked = target.checked

      return item
    })

    const chengedReason = this.reasons.find(reason => reason.id)

    dispatchCustomEvent('changedReason', chengedReason, this, false, false)
  }

  handleDescriptionInput(event: InputEvent) {
    const target = event.target as HTMLInputElement
    this.reasonText = target.value
  }

  isSendButtonDisabled(): boolean {
    return !this.reasons.some(reason => reason.checked) || (this.showReasonText && this.reasonText.length > this.maxReasonTextLength)
  }

  handleClose() {
    this.reasonText = ''
    dispatchCustomEvent('close', true, this, false, false)
  }

  handleSend() {
    const message: IFeedbackReasonSendEvent = {
      selectedReasons: this.reasons.filter(reason => reason.checked),
      reasonText: this.reasonText,
    }

    this.reasonText = ''

    dispatchCustomEvent('send', message, this, false, false)
  }
}