<template>
  <tr class="loop" :class="{ wanted: wanted, removed: !wanted }">
    <td class="icon-bar">
      <span
        @click="deleteLoop({ proteinName: getScaffold.name, loop })"
        class="delete"
      ></span>
      <span
        @click="wanted ? makeRemoved(loop) : makeWanted(loop)"
        :class="{ want: wanted, remove: !wanted }"
      ></span>
      <span
        @click="zoomToLoop({ protein: getScaffold, loop })"
        class="threeD"
      ></span>
    </td>
    <td
      v-for="state in getDisplayedStateProperties"
      :key="loop.id + state.title"
    >
      <div class="value" :class="{ censor: state.censor }">
        <div
          v-if="state.colorSelector != null"
          class="color-swatch"
          :style="{
            backgroundColor: state.colorSelector(loop),
          }"
        ></div>
        {{ state.selector(loop) }}
      </div>
    </td>
  </tr>
</template>

<script>
import { mapActions, mapGetters, mapMutations } from "vuex";

export default {
  props: ["loop", "wanted"],
  methods: {
    ...mapMutations(["sortInterestingLoops", "makeWanted", "makeRemoved"]),
    ...mapActions(["zoomToLoop", "deleteLoop"]),
  },
  computed: {
    ...mapGetters(["getDisplayedStateProperties", "getScaffold"]),
  },
};
</script>

<style scoped>
.color-swatch {
  width: 10px;
  height: 10px;
  margin-right: 5px;
}
.value {
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.loop {
  width: 100%;
}
td:nth-child(even) {
  background: #dddddd;
}

td:nth-child(odd) {
  background: #eeeeee;
}

.removed {
  color: #00000086;
}

.removed td:nth-child(even) {
  background: #dddddd88;
}

.removed td:nth-child(odd) {
  background: #eeeeee88;
}
.delete::before {
  font-family: "EBI-Common";
  font-size: 15px;
  content: "";
}
.threeD::before {
  font-family: "EBI-Common";
  font-size: 16px;
  content: "";
}
.icon-bar > * {
  margin-right: 5px;
}
.icon-bar > *:hover {
  color: var(--accent);
  cursor: pointer;
}
.icon-bar {
  width: 50px;
  max-width: 50px;
  min-width: 50px;
}
.want::before {
  font-family: "EBI-Common";
  font-size: 16px;
  content: "";
}
.remove::before {
  font-family: "EBI-Common";
  font-size: 16px;
  content: "";
}
</style>