import type { TemplateResult } from 'lit'
import { css, html, nothing } from 'lit'
import { property } from 'lit/decorators.js'
import { when } from 'lit/directives/when.js'
import { customElementIfNotExist } from '../../../utils/customElementIfNotExist'
import { UsBaseElement } from '../../base/UsBaseElement'
import { ActionTypes } from '../models/IDetailedActions'
import type { IAction, IDetailedActions } from '../models/IDetailedActions'
import { localizeManager } from '../../../dependencies'
import { dispatchCustomEvent } from '../../../upswot-components'
import UsDetailedActions_css from './detailedActions.pcss'

declare global {
  interface HTMLElementTagNameMap {
    'us-detailed-actions': UsDetailedActions
  }
}

@customElementIfNotExist('us-detailed-actions')
export class UsDetailedActions extends UsBaseElement {
  static styles = [
    UsBaseElement.styles,
    css([UsDetailedActions_css] as TemplateStringsArray | any),
  ]

  @property({ type: String }) widgetView = ''
  @property({ type: Boolean }) readonly = false
  @property({ type: Boolean }) disabled = false
  @property({ type: Object }) actions: IDetailedActions = {} as IDetailedActions

  defaultActionsStates: IDetailedActions = {
    active: { state: false, display: false, disabled: false },
    ignore: { state: false, display: false, disabled: false },
    delete: { display: false, disabled: false },
    edit: { display: false, disabled: false },
  }

  render() {
    if (!this.actions)
      return null

    const actionsProps: IDetailedActions = { ...this.defaultActionsStates, ...this.actions }
    const actions: (symbol | TemplateResult<1>)[] = []

    // The render order of actions is set in enum (ActionTypes)
    Object.values(ActionTypes).forEach((actionType: ActionTypes) => {
      const action = actionsProps[actionType] as IAction
      actions.push(this.renderAction(action, actionType))
    })

    return html`
      <div class="detailed-actions">
        <div class="detailed-actions__title">
          ${localizeManager.detail_actions_title()}
        </div>
        <div class="actions">
          ${actions}
        </div>
      </div>
    `
  }

  renderAction(action: IAction, actionType: ActionTypes): TemplateResult<1> | symbol {
    const { title, description } = this.getActionTitleAndDescription(actionType)
    const hasTooltip = action.tooltipText && action.tooltipText.length
    let actionButton = html`
      <us-switch 
        ?disabled=${this.readonly || action.disabled}
        ?checked="${action.state}" 
        @change="${(e: Event) => this.handleAction(e, actionType)}"
      ></us-switch>
    `

    if ([ActionTypes.EDIT, ActionTypes.DELETE].includes(actionType)) {
      actionButton = html`
        <us-button
          ?disabled=${this.readonly || action.disabled}
          variant="icon-secondary-m-light"
          .iconName="${ActionTypes.EDIT === actionType ? 'edit' : 'trash'}"
          @click="${(e: Event) => this.handleAction(e, actionType)}"
        ></us-button>
      `
    }

    return when(action.display, () => html`
      <div class="action-content">
        <div class="action-content__info">
          <b>${title}</b>
          <p>${description}</p>
        </div>
        <div class="action-content__button">
          ${when(hasTooltip,
            () => html`
              <us-tooltip 
                showArrow
                class="tooltip"
                corner="top"
                .widgetView="${this.widgetView}"
              >
                <span slot="activator">
                  ${actionButton}
                </span>
                <p slot="content">
                  ${action.tooltipText}
                </p>
              </us-tooltip>
            `,
            () => actionButton,
          )}
        </div>
      </div>
    `, () => nothing)
  }

  getActionTitleAndDescription(actionType: ActionTypes) {
    const actionTexts = {
      active: {
        title: localizeManager.detail_action_active_title(),
        description: localizeManager.detail_action_active_description(),
      },
      ignore: {
        title: localizeManager.detail_action_ignore_title(),
        description: localizeManager.detail_action_ignore_description(),
      },
      edit: {
        title: localizeManager.detail_action_edit_title(),
        description: localizeManager.detail_action_edit_description(),
      },
      delete: {
        title: localizeManager.detail_action_delete_title(),
        description: localizeManager.detail_action_delete_description(),
      },
    }

    return actionTexts[actionType]
  }

  handleAction(e: Event, actionType: ActionTypes) {
    const actions = {
      active: () => this.handleActionActive(e),
      ignore: () => this.handleActionIgnore(e),
      edit: () => this.handleActionEdit(e),
      delete: () => this.handleActionDelete(e),
    }

    actions[actionType]()
  }

  handleActionActive(e: Event) {
    if (e.target) {
      const isChecked = (e.target as HTMLInputElement).checked
      dispatchCustomEvent('active', isChecked, this, false, false)
    }
  }

  handleActionIgnore(e: Event) {
    if (e.target) {
      const isChecked = (e.target as HTMLInputElement).checked
      dispatchCustomEvent('ignore', isChecked, this, false, false)
    }
  }

  handleActionEdit(e: Event) {
    e.stopPropagation()
    dispatchCustomEvent('edit', null, this, false, false)
  }

  handleActionDelete(e: Event) {
    e.stopPropagation()
    dispatchCustomEvent('delete', null, this, false, false)
  }
}