<template>
  <ul
    v-bind:class="[componentClass]"
    tabindex="0"
  >
    <li
      v-bind:class="['c-item', {'c-active': activeWindowIdent === row.appWindowIdent}]"
      v-for="(row, index) in appWindowsList"
      :key="index"
    >
      <div
        class="c-btn-close"
        tabindex="2"
        v-on:click="deleteAppWindow({ appWindowIdent: row.appWindowIdent })"
      />
      <div
        class="c-window"
        tabindex="0"
        v-on:click="setActiveAppWindow({ appWindowIdent: row.appWindowIdent })"
      >{{row.appWindowTranslatedDesc}}</div>
      <div
        class="c-btn-reload"
        tabindex="1"
        v-on:click="reloadAppWindow({ appWindowIdent: row.appWindowIdent })"
      />
    </li>
  </ul>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data: function () {
    return {
      componentClass: "c-manager"
    };
  },
  props: {
    showMainWindow: {
      type: Boolean,
      default: true,
      required: false
    }
  },
  computed: {
    ...mapGetters('csAppWindowsUtils', ['csAppWindows', 'activeWindowIdent', 'mainAppWindowIdent']),
    appWindowsList: function () {
      function reject(obj, keys) {
      return Object.keys(obj)
        .filter(k => !keys.includes(k))
        .map(k => Object.assign({}, {[k]: obj[k]}))
        .reduce((res, o) => Object.assign(res, o), {});
      }
      return this.showMainWindow ? this.csAppWindows : reject(this.csAppWindows, [this.mainAppWindowIdent])
    }
  },
  methods: {
    ...mapActions("csAppWindowsUtils", [
      "deleteAppWindow",
      "reloadAppWindow",
      "setActiveAppWindow"
    ])
  }
};
</script>
