<template>
  <div v-if="errors.length > 0" v-bind:class="[componentClass]">
    <div class="c-container" v-show="containerExpanded===true">
      <div class="c-header-container">
        <div class="c-close-button c-btn-close" @click="onCloseButtonClick"></div>
        <div class='c-header'>Błędy</div>
      </div>
      <ul class='c-list'>
        <li v-for="(error, index) in errors" :key="index" v-bind:class="{'c-error':true}">
          <div class='c-btn-remove' v-on:click="onClick(error)"></div>
          <span class='c-msg'>{{error.messageText}}</span>
        </li>
      </ul>
    </div>
    <div class="c-toolbar">
      <div class="c-btn-close" @click="onCloseButtonClick">Zamknij</div>
    </div>
    <div class="c-bar" @click="onBarClick" />
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  data: function () {
    return {
      componentClass: 'c-errors',
      containerExpanded: true
    }
  },
  computed: {
    ...mapGetters('csAppWindowsUtils', [
      'getErrors'
    ]),
    errors: function () {
      return this.getErrors().filter(function(error) {
        return error.isVisible === true
      })
    }
  },
  methods: {
    ...mapActions('csAppWindowsUtils', [
      'removeError', 'clearErrors', 'hideError', 'hideAllErrors'
    ]),
    onBarClick: function() {
      this.containerExpanded = !this.containerExpanded;
    },
    onClick: function (error) {
      this.hideError({error: error})
    },
    onCloseButtonClick: function() {
      this.hideAllErrors();
    }
  }
}</script>
