<template>
  <button 
    v-bind:class="[componentClass, getActionKind, {'c-confirm': showConfirmation}]" 
    :type="type" 
    :title="getTitle" 
    v-if="isVisible && actionState !== 0" 
    v-on:click="onClick">
    <slot
      name="content"
      :row="contextRow" 
      :where="where"
    >{{ getLabel }}
    </slot>
    <div
      v-if="infoMessageText != null && infoMessageText != ''"
      class="c-info-txt"
    >
      {{ infoMessageText }}
    </div>
    <div
      v-if="warningMessageText != null && warningMessageText != ''"
      class="c-warning-txt"
    >
      {{ warningMessageText }}
    </div>
    <div
      v-if="errorMessageText != null && errorMessageText != ''"
      class="c-error-txt"
    >
      {{ errorMessageText }}
    </div>
    <div class="c-action-confirm" v-if="showConfirmation">
      <slot name="confirmation" :row="contextRow" />
      <div class="c-toolbar">
        <button @click.stop="deny" class="c-btn-close">
          <slot name="denyButton" :row="contextRow" >
            NIE
          </slot>
        </button>
        <button @click.stop="accept" class="c-btn-exec">
          <slot name="acceptButton" :row="contextRow" >
            TAK
          </slot>
        </button>
      </div>
    </div>
  </button>
  <div v-bind:class="[componentClass, getActionKind]" 
      v-else-if="isVisible && actionState === 0" >
    <c-spinner :style="{ 'width': width + 'px'}" />
  </div>
</template>

<script>
import base from './c-base'
const props = {
  actionIdent: {
    type: String,
    required: true
  },
  label: {
    type: String,
    default: null
  },
  showLabel: {
    type: Boolean,
    default: true
  },
  type: {
    type: String,
    default: "button"
  },
  dataFieldIdent: {
    type: String,
    default: null
  }
}

import { mapGetters, mapActions } from 'vuex'
import stringUtils from '../classes/stringUtils'

export default {
  extends: base,
  data: function () {
    return {
      componentClass: 'c-btna',
      width: 0,
      confirmed: false,
      showConfirmation: false
    }
  },
  props,
  mounted: async function() {
    if(this.getAppWindow(this.appWindowIdent) == null) {
      await this.addAppWindow({
        appWindowIdent: this.appWindowIdent,
        setActive: false,
        lookupDef: null,
        addRoutingData: false,
        path: null,
        query: null
      })
    }
    this.width = this.$el.offsetHeight
  },
  updated: function() {
    this.width = this.$el.offsetHeight
  },
  computed: {
    ...mapGetters('csAppWindowsUtils', [
      'getDataSetAction',
      'getDataSetActionState',
      'getAppWindow'
    ]),
    action: function () {
      return this.getDataSetAction(this.dataSet, this.actionIdent)
    },
    getActionKind: function () {
      return this.action !== null ? this.action.kind : null
    },
    getDataFieldIdent4Label: function () {
      return this.action !== null ? this.action.dataFieldIdent4Label : null
    },
    getActionTranslatedDesc: function () {
      return this.action !== null ? this.action.actionTranslatedDesc : null
    },
    getLabel: function () {
      if (!this.showLabel) return null
      if (stringUtils.isEmpty(this.getDataFieldIdent4Label)) {
        if (stringUtils.isEmpty(this.label)) {
          return this.action !== null ? this.getActionTranslatedDesc : null
        } else {
          return this.label
        }
      }
      return this.getDataFieldValue(this.getDataFieldIdent4Label)
    },
    getTitle: function () {
      return this.getDataFieldValue(this.dataFieldIdent4Title)
    },
    isVisible: function () {
      return this.action ? true : false
    },
    actionState: function () {
      return this.getDataSetActionState(this.dataSet, this.actionIdent, this.contextRow)
    }
  },
  methods: {
    ...mapActions('csAppWindowsUtils', [
      'invokeAction',
      'addAppWindow'
    ]),
    accept: function(){
      this.confirmed = true
      this.onClick()
    },
    deny: function(){
      this.confirmed = false
      this.showConfirmation = false
    },
    onClick: function () {
      this.$emit('beforeExec')
      if (this.$scopedSlots.confirmation && !this.confirmed)
        this.showConfirmation = true
      else{
        let payload = {
          appWindowIdent: this.appWindowIdent,
          dataSetIdent: this.dataSetIdent,
          actionIdent: this.actionIdent,
          row: this.contextRow,
          router: this.$router,
          window: window,
          layoutIdent: this.layoutIdent
        }
        this.showConfirmation = false
        this.confirmed = false
        this.invokeAction(payload)
      }
    }
  }
}</script>