<template>
  <div class="alerter">
    <div
      v-for="(alert, key) in alerts"
      :key="key"
      :class="'alert alert-dismissible alert-' + alert.type"
      transition="staggered"
      stagger="100"
    >
      <button type="button" class="close" @click="remove(alert)">
        <span aria-hidden="true">&times;</span>
      </button>
      <div v-html="alert.friendlyMessageHtml"></div>

      <details v-if="alert.technicalMessage">
        <summary>Technische melding</summary>
        <p class="mb-1">{{ alert.technicalMessage }}</p>
        <p v-if="alert.errorCode">Error code: {{ alert.errorCode }}</p>
      </details>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '../variables.scss';

.alerter {
  position: fixed;
  top: 8em;
  width: 50vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: $z-index-alerter;
}

.alert {
  opacity: 0.9;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
}

.staggered-enter-active,
.staggered-leave-active {
  opacity: 0;
  transition: all 0.5s ease;
}

details {
  font-size: 12px;
  margin-top: 10px;
}
</style>

<script>
import { mapActions, mapState } from 'vuex';

export default {
  computed: mapState({
    alerts: (state) => state.alerts.all
  }),
  methods: {
    ...mapActions('alerts', ['remove'])
  }
};
</script>
