import { css, html } from 'lit'
import { property } from 'lit/decorators.js'
import type { DirectiveClass, DirectiveResult } from 'lit/directive'
import { classMap } from 'lit/directives/class-map.js'
import { when } from 'lit/directives/when.js'
import { customElementIfNotExist } from '../../utils/customElementIfNotExist'
import { dispatchCustomEvent } from '../../utils/dispatchCustomEvent'
import { UsBaseElement } from '../base/UsBaseElement'
import { getWidgetViewClasses } from '../../utils/getWidgetViewClasses'
import { redispatchEvent } from '../../upswot-components'
import type { IDetailedInfo } from './models/IDetailedInfo'
import UsDetailedInfo_css from './detailedInfo.pcss'

import './detailedCard/DetailedCard'
import './detailedList/DetailedList'
import './detailedActions/DetailedActions'

import '../popup/UsPopup'
import '../loader/UsLoader'
import '../../layouts/scrollLayout/ScrollLayout'
import '../form/switch/UsSwitch'
import '../button/UsButton'

declare global {
  interface HTMLElementTagNameMap {
    'us-detailed-info': UsDetailedInfo
  }
}

@customElementIfNotExist('us-detailed-info')
export class UsDetailedInfo extends UsBaseElement implements IDetailedInfo {
  static styles = [
    UsBaseElement.styles,
    css([UsDetailedInfo_css] as TemplateStringsArray | any),
  ]

  @property({ type: Boolean }) readonly = false
  @property({ type: Object }) detailedInfo: IDetailedInfo['detailedInfo'] = null
  @property({ type: String }) widgetView: IDetailedInfo['widgetView'] = 'vertical'
  @property({ type: String }) popupTitle: IDetailedInfo['popupTitle'] = ''
  @property({ type: Boolean }) isPopupShow: IDetailedInfo['isPopupShow'] = false
  @property({ type: Boolean }) isLoading: IDetailedInfo['isLoading'] = false

  get isIgnored(): boolean {
    if (this.detailedInfo && this.detailedInfo.actions) {
      const { ignore, active } = this.detailedInfo.actions
      const actionIgnoreState = (ignore && ignore.state) ?? false
      const actionActiveState = (active && active.state) ?? true

      return actionIgnoreState || !actionActiveState
    }

    return false
  }

  render() {
    return html`
      <us-popup
        position="center"
        width="100%"
        height="100%"
        name="${this.popupTitle}"
        alternativeHeader
        noContentPadding
        variant="preview"
        ?show=${this.isPopupShow}
        ?readonly=${this.readonly}
        @back="${this.handlePopupHide}"
      >
        <div class="${this.getDetailedInfoClasses()}">
          ${when(this.isLoading, () => html`
            <div class="detailed-info__loader">
              <us-loader 
                type="infinity"
              ></us-loader>
            </div>
          `, () => this.renderWrapperBlock())}
        </div>
      </us-popup>
    `
  }

  getDetailedInfoClasses(): DirectiveResult<DirectiveClass> {
    const widgetViewClasses = getWidgetViewClasses(this.widgetView)

    return classMap({
      'detailed-info': true,
      ...widgetViewClasses,
    })
  }

  renderWrapperBlock() {
    if (this.isVerticalOrHorizontalSmall()) {
      return html`
        <us-scroll-layout ariaLabel="detailed-info">
          <div class="detailed-info__wrapper">
            ${this.renderDetailedCardBlock()}
            <div class="detailed-info__container">
              ${this.renderDetailedListBlock()}
              <div class="analysis-block">
                <slot name="analysis"></slot>
              </div>
              ${this.renderDetailedActionsBlock()}
            </div>
            <div class="extra-block">
              <slot name="extra"></slot>
            </div>
          </div>
        </us-scroll-layout>
      `
    } else {
      return html`
        <div class="detailed-info__wrapper">
          ${this.renderDetailedCardBlock()}
            <div class="detailed-info__container">
              <us-scroll-layout ariaLabel="detailed-info">
                <div class="container__scroll">
                  ${this.renderDetailedListBlock()}
                  <div class="analysis-block">
                    <slot name="analysis"></slot>
                  </div>
                  ${this.renderDetailedActionsBlock()}
                  <div class="extra-block">
                    <slot name="extra"></slot>
                  </div>
                </div>
              </us-scroll-layout>
            </div>
        </div>
      `
    }
  }

  renderDetailedCardBlock() {
    if (!this.detailedInfo)
      return null

    return html`
      <us-detailed-card
        .card="${this.detailedInfo.card}"
        ?isIgnored="${this.isIgnored}"
      >
        <slot name="caption" slot="caption"></slot>
        <slot name="additional" slot="additional"></slot>
      </us-detailed-card>
    `
  }

  renderDetailedListBlock() {
    if (!this.detailedInfo)
      return null

    return html`
      <us-detailed-list
        .widgetView="${this.widgetView}"
        .list="${this.detailedInfo.list}"
        ?isIgnored="${this.isIgnored}"
      ></us-detailed-list>
    `
  }

  renderDetailedActionsBlock() {
    if (!this.detailedInfo || !this.detailedInfo.actions)
      return null

    return html`
      <us-detailed-actions
        .widgetView="${this.widgetView}"
        .actions="${this.detailedInfo.actions}"
        ?readonly="${this.readonly}"
        @active="${this.handleAction}"
        @ignore="${this.handleAction}"
        @edit="${this.handleAction}"
        @delete="${this.handleAction}"
        @sendReminder="${this.handleAction}"
      ></us-detailed-actions>
    `
  }

  handleAction(e: Event) {
    redispatchEvent(this, e)
  }

  isVerticalOrHorizontalSmall() {
    return this.widgetView.includes('vertical') || this.widgetView.includes('horizontal-small')
  }

  handlePopupHide() {
    dispatchCustomEvent('back', null, this, false, false)
  }
}