<template>
  <div
    :class="{
      modal: true,
      'delete-modal': true,
      'is-active': active
    }"
  >
    <div
      class="modal-background"
      @click="$emit('cancel')"
    />
    <div class="modal-content">
      <div class="box">
        <p class="text">
          {{ text }}
        </p>
        <p
          v-if="isError"
          class="is-danger"
        >
          {{ errorText }}
        </p>
        <p class="has-text-right">
          <a
            :class="{
              button: true,
              'is-danger': true,
              'is-loading': isLoading
            }"
            @click="$emit('confirm')"
          >
            {{ deleteButtonText || $t('main.confirmation') }}
          </a>
          <button
            class="button is-link"
            @click="$emit('cancel')"
          >
            {{ $t('main.cancel') }}
          </button>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { modalMixin } from '@/components/modals/base_modal'

export default {
  name: 'DeleteModal',
  mixins: [modalMixin],
  props: {
    text: {
      required: true,
      type: String
    },
    active: {
      default: false,
      type: Boolean
    },
    isLoading: {
      default: false,
      type: Boolean
    },
    isError: {
      default: false,
      type: Boolean
    },
    errorText: {
      default: '',
      type: String
    },
    deleteButtonText: {
      default: '',
      type: String
    }
  },
  computed: {
    ...mapGetters([])
  },
  methods: {
    ...mapActions([])
  }
}
</script>

<style lang="scss" scoped>
.modal-content .box {
  padding: 2em;
}
.modal-content .box p.text {
  margin-bottom: 1em;
}

p.is-danger {
  color: #ff3860;
  font-style: italic;
  margin-bottom: 2em;
}
</style>
