<template>
  <div v-if="pluginSlot">
    <el-tooltip
      v-test-id="'tooltip'"
      :disabled="!pluginSlotDisabled"
      :content="disabledMessage"
      placement="top">
      <div :class="{'u-mb2': true, 'u-inline-block': pluginSlotDisabled}">
        <el-button
          v-test-id="'button-row'"
          type="button"
          v-for="button in visibleButtons"
          :key="button.text"
          :disabled="!button.enabled || pluginSlotDisabled"
          :loading="componentLoadingIndicator"
          v-loading.fullscreen.lock="fullscreenLoadingIndicator"
          @click="handleButtonClick(button)">
            {{ button.text }}
        </el-button>
      </div>
    </el-tooltip>
    <el-dialog :title="plugin.name" :visible.sync="isDialogVisible" :top.sync="dialogTop" :width.sync="dialogWidth">
      <el-loading-wrapper
        tag="div"
        :loading="isDialogLoading"
        loading-text="Loading...">
          <div ref="vendorIframeContainer"></div>
      </el-loading-wrapper>
    </el-dialog>
  </div>
</template>

<script>
import { PluginSlotMixin } from './mixins.js'
import { connectToChild } from 'penpal'

export default {
  name: 'ButtonRow',
  mixins: [PluginSlotMixin],
  data () {
    return {
      buttons: [],
      handleResponseName: null,
      handleErrorName: null,
      vendorIframe: null,
      isDialogVisible: false,
      isDialogLoading: false,
      dialogWidth: '50%',
      dialogTop: '15vh'
    }
  },
  computed: {
    visibleButtons () {
      return this.buttons.filter(button => button.visible)
    }
  },
  methods: {
    getSlotExposedMethods () {
      return {
        updateButtons: this.updateButtons,
        toggleDialogVisibility: this.toggleDialogVisibility,
        toggleDialogSpinner: this.toggleDialogSpinner,
        initializeVendorIframe: this.initializeVendorIframe,
        showLoadingIndicator: this.showLoadingIndicator
      }
    },
    initializeSlot (options) {
      this.buttons = options.buttons
      this.handleResponseName = options.handleResponse
      this.handleErrorName = options.handleError
    },
    updateButtons (buttons) {
      this.buttons = buttons
    },
    toggleDialogVisibility (enabled) {
      this.isDialogVisible = enabled === undefined ? !this.isDialogVisible : enabled
    },
    toggleDialogSpinner (enabled) {
      this.isDialogLoading = enabled === undefined ? !this.isDialogLoading : enabled
    },
    handleButtonClick (button) {
      this.pluginIframeConnection.promise.then(iframe => {
        const callback = iframe[button.callback]
        return callback(this.context)
      })
    },
    async initializeVendorIframe (url, dialogDimensions = {}) {
      const vm = this
      this.toggleDialogVisibility(true)
      this.toggleDialogSpinner(true)
      this.dialogWidth = dialogDimensions.width || this.dialogWidth
      this.dialogTop = dialogDimensions.top || this.dialogTop
      await this.$nextTick()
      const containerElement = this.$refs.vendorIframeContainer
      containerElement.firstChild && containerElement.firstChild.remove()
      const iframe = this.createPluginIframe(url, containerElement, [
        'u-width100'
      ])
      iframe.style = `height: ${dialogDimensions.height || '500px'}; border: 0`
      const connection = connectToChild({
        iframe,
        methods: this.combinedMethods
      })

      connection.promise.then(child => {
        vm.vendorIframe = child
        vm.vendorIframeInitialized = true
        child.onReady(this.context)
      })
    }
  }
}
</script>
