<template>
  <t-modal
    v-model="vModel"
    id="_global-error-modal"
    :clickToClose="clickToClose"
    @before-open="onBeforeOpen"
    @closed="onClosed"
    class="_modal-overlay"
    :style="{
      zIndex: zIndex
    }"
  >
    <!-- Error icon -->
    <p class="text-center mb-6">
      <v-icon name="exclamation-triangle" scale="5" class="text-@light-error"/>
    </p>

    <!-- Error message -->
    <p v-if="errorPayload" class="mb-6">{{ errorPayload.message }}</p>

    <!-- Error -->
    <Collapse
      :variant="isTheme({
        'light': 'white-smoke',
        'dark': 'dark-jungle'
      })"
      :trigger-text="$h.capitalize($t('global.details'))"
    >
      <p v-if="errorPayload" class="text-gray-400">{{ errorPayload.error }}</p>
    </Collapse>

    <!-- Footer -->
    <template v-slot:footer>
      <div class="flex justify-center">
        <Button @click.native="vModel = false">
          {{ $t('global.close') | capitalize }}
        </Button>
      </div>
    </template>

  </t-modal>

</template>

<script>
// vuex helpers
import { mapState, mapActions } from 'vuex'
// BaseModal component
import BaseModal from './BaseModal'
/**
 * GlobalErrorModal component
 */
export default {
  name: 'GlobalErrorModal',
  extends: BaseModal,
  computed: {
    // Map state from 'Core/System' module
    ...mapState('Core/System', [
      'errorPayload'
    ])
  },
  methods: {
    // Map actions from 'Core/System' module
    ...mapActions('Core/System', [
      'clearSystemError'
    ]),
    /**
     * Called when popup close
     * @return {void}
     */
    onClosed: function () {
      this.clearSystemError()
    }
  }
}
</script>

<style lang="scss">
#_global-error-modal {
  //
}
</style>
