<template>
  <div :class="{ spinning: isAwaiting }">
    <table class="table">
      <thead class="header">
        <tr>
          <th></th>
          <th
            class="title"
            v-for="state in getDisplayedStateProperties"
            :key="state.title"
          >
            {{ state.title }}
            <span
              v-if="state.title != 'Name'"
              class="sort-button"
              @click="sortInterestingLoops(state.selector)"
              ></span
            >
          </th>
        </tr>
      </thead>
      <tr>
        <td
          class="dividor"
          :colspan="Object.keys(getDisplayedStateProperties).length + 1"
        >
          Candidate
        </td>
      </tr>
      <draggable
        tag="tbody"
        class="wanted loop-list"
        :list="wanted"
        group="loops"
      >
        <WantedLoop
          class="list-group-item"
          v-for="loop in wanted"
          :key="loop.id"
          :loop="loop"
          :wanted="true"
        />
      </draggable>

      <tr>
        <td
          class="dividor"
          :colspan="Object.keys(getDisplayedStateProperties).length + 1"
        >
          Preserved
        </td>
      </tr>
      <draggable
        tag="tbody"
        class="removed loop-list"
        :list="removed"
        group="loops"
      >
        <WantedLoop
          class="list-group-item"
          v-for="loop in removed"
          :key="loop.id"
          :loop="loop"
          :wanted="false"
        />
      </draggable>
    </table>
  </div>
</template>
<script>
import draggable from "vuedraggable";
import WantedLoop from "./WantedLoop";
import { mapGetters, mapMutations } from "vuex";

export default {
  components: {
    draggable,
    WantedLoop,
  },
  computed: {
    ...mapGetters([
      "getWantedLoops",
      "getRemovedLoops",
      "getDisplayedStateProperties",
      "isAwaiting",
    ]),
    wanted: {
      get() {
        return this.getWantedLoops;
      },
      set(value) {
        this.mutateWantedLoops(value);
      },
    },
    removed: {
      get() {
        return this.getRemovedLoops;
      },
      set(value) {
        this.mutateRemovedLoops(value);
      },
    },
  },
  methods: {
    ...mapMutations([
      "mutateWantedLoops",
      "mutateRemovedLoops",
      "sortInterestingLoops",
    ]),
  },
};
</script>

<style scoped>
.dividor {
  font-size: medium;
}
tbody > * {
  text-align: right;
}

table {
  table-layout: auto;
  width: 100%;
  border-spacing: 0;
  background: white;
  border-radius: 10px;
  padding: 0px 5px;
}
.title {
  white-space: nowrap;
  color: #444;
}
.sort-button {
  font-family: "EBI-Common";
  font-size: 15px;
  cursor: pointer;
}
.sort-button:hover {
  color: var(--accent);
}
.toggle-button::before {
  font-family: "EBI-Common";
  font-size: 10px;
}
.want::before {
  content: "";
}
.remove::before {
  content: "";
}
.toggle-button:hover {
  color: var(--accent50);
}
.spinning {
  opacity: 0.4;
  pointer-events: none;
  cursor: wait;
}
</style>
