<template>
  <div class="segment-row">
    <div
      :id="`fe-${type}-${segment.id}`"
      v-for="(segment, index) in segments"
      :key="index"
      :style="getSegmentationCss(segment)"
      @mouseenter="
        setPreview({
          $event,
          description: {
            Name: segment.id,
            From: segment.start,
            To: segment.end,
            'B-factor': round(segment.flexibility[type], 2),
          },
        })
      "
      @mouseleave="setPreview(null)"
      class="segment-viz"
    >
      <span
        @click="toggleLoopWanted(getLoop(segment))"
        class="toggle-button"
        :class="{
          want: isLoopWanted(segment.id),
          remove: !isLoopWanted(segment.id),
        }"
      ></span>
      <span class='censor'>
      {{ segment.id }}
      </span>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters, mapActions } from "vuex";
import { color } from "d3-color";
import RoundMixin from "../../mixins/RoundMixin"
export default {
  props: ["protein", "segments", "scale", "type"],

  methods: {
    ...mapMutations(["setPreview"]),
    ...mapActions(["toggleLoopWanted"]),
    getMarginLeft(loop) {
      let index = this.protein.acids.find((a) => a.pdb_number == loop.start)
        .index;
      let marginLeftPercent = (index / this.protein.acids.length) * 100;
      return marginLeftPercent;
    },

    getWidth(loop) {
      let loopLength = this.protein.acids.filter(
        (a) => a.pdb_number >= loop.start && a.pdb_number <= loop.end
      ).length;

      let widthPercent = (loopLength / this.protein.acids.length) * 100;
      return widthPercent;
    },

    getBfactorColor(segment) {
      return this.scale(segment.flexibility[this.type]);
    },

    getSegmentationCss(segment) {
      let loop_color = color(this.getBfactorColor(segment));
      if (this.isLoopWanted(segment.id)) {
        loop_color.opacity = 0.3;
      }
      return {
        "--bfactor-value": `${loop_color}`,
        "--marginLeftPercent": `${this.getMarginLeft(segment)}%`,
        "--widthPercent": `${this.getWidth(segment)}%`,
      };
    },
    getLoop(segment) {
      return this.protein.loops.find((l) => l.id == segment.id);
    },
  },

  computed: {
    ...mapGetters(["isLoopWanted"]),
  },
  mixins: [RoundMixin],
};
</script>

<style scoped>
.segment-viz {
  position: absolute;
  width: var(--widthPercent);
  margin-left: var(--marginLeftPercent);
  border-style: solid;
  border-left-width: 1px;
  border-right: 1px;
  border-top: 0px;
  border-bottom: 0px;
  height: 15px;
  background-color: var(--bfactor-value);
  padding: 0px 2px;
  font-size: 0.7em;
  color: white;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.segment-row {
  position: relative;
  padding-bottom: 5px;
}

.toggle-button::before {
  font-family: "EBI-Common";
  font-size: 10px;
}
.want::before {
  content: "";
}
.remove::before {
  content: "";
}
.toggle-button:hover{
  color: var(--accent);
}
</style>