<template>
  <div class="loops-row">
    <div
      class="loop"
      v-for="(loop, index) in loops"
      :key="index"
      :id="`${
        graftingMode != 'scaffold' && graftingMode != 'insert' ? 'le' : 'lp'
      }-${loop.id}`"
      :style="getLoopCss(loop)"
      @click.exact="loopClicked(loop)"
      @mouseenter="previewLoop($event, loop)"
      @mouseleave="unpreviewLoop()"
    >
      <div class="loop-viz">
        <div class="butt"></div>
        <div class="mid"></div>
        <div class="butt"></div>
      </div>
      <!-- <div class="greeks">
        <div class="greek" :style="calculateDistanceColor(loop.distance)"></div>
        <div class="greek" :style="calculateAngleColor(loop.delta)"></div>
        <div class="greek" :style="calculateAngleColor(loop.theta)"></div>
        <div class="greek" :style="calculateRhoAngleColor(loop.rho)"></div>
      </div> -->
    </div>
  </div>
</template>

<script>
import { color, hsl } from "d3-color";
import GreekMixin from "@/mixins/GreeksMixin";
import { mapMutations, mapGetters, mapActions } from "vuex";
import RoundMixin from "../../../mixins/RoundMixin";
export default {
  name: "LoopRow",
  props: ["protein", "loops", "isFirst", "graftingMode"],
  mixins: [GreekMixin, RoundMixin],
  methods: {
    ...mapMutations(["setPreview", "setLoopPreview"]),
    ...mapActions(["addLoopDetail", "pickFor", "selectPairingInsert"]),
    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;
    },

    previewLoop($event, loop) {
      this.setPreview({
        $event,
        description: {
          Name: loop.id,
          D: this.round(loop.distance, 2),
          δ: this.round(loop.delta, 2),
          θ: this.round(loop.theta, 2),
          ρ: this.round(loop.rho, 2),
          Start: loop.start,
          End: loop.end,
        },
      });
      this.setLoopPreview({ id: loop.id, role: this.protein.role });
    },
    unpreviewLoop() {
      this.setPreview(null);
      this.setLoopPreview(null);
    },

    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;
    },

    getLoopCss(loop) {
      let loop_color = color(this.protein.color);

      // grafting
      if (this.graftingMode == "scaffold") {
        if (this.pickingFor?.id != loop.id) {
          loop_color.opacity = 0.2;
        }
      } else if (this.graftingMode == "insert") {
        if (this.pickingFor == null) {
          loop_color.opacity = 0.2;
        }
      } else {
        // regular mode
        if (!loop.hasGeometry) {
          loop_color = hsl(loop_color);
          loop_color.s *= 0.3;
          loop_color = loop_color.rgb();
        }
        if (!this.protein.incorrectLoop(loop)) {
          loop_color = color("rgb(10,1,1)");
        }
        if (this.isLoopWanted(loop.id)) {
          loop_color = loop_color.brighter(1.2);
        }
        if (
          this.getLoopDetails.length != 0 &&
          !this.getLoopDetails.map((l) => l.loop.id).includes(loop.id)
        ) {
          loop_color.opacity = 0.2;
        }
      }

      return {
        "--protein-color": loop_color,
        "--hover-color": loop_color.brighter(1.2),
        "--marginLeftPercent": `${this.getMarginLeft(loop)}%`,
        "--widthPercent": `${this.getWidth(loop)}%`,
        "--alignment-position": this.isFirst ? "flex-start" : "flex-end",
        // "--greek-loop-order": this.isFirst ? "column-reverse" : "column",
      };
    },
    loopClicked(loop) {
      if (this.graftingMode == "scaffold") {
        this.pickFor(loop);
      } else if (this.graftingMode == "insert") {
        this.selectPairingInsert(loop);
      } else {
        this.addLoopDetail({ protein: this.protein, loop });
      }
    },
  },
  computed: {
    ...mapGetters(["isLoopWanted", "pickingFor", "getLoopDetails"]),
  },
};
</script>

<style scoped>
.loops-row {
  position: relative;
  height: 10px;
  margin-top: 3px;
  padding-top: 3px;
  margin-bottom: 3px;
}
.loop {
  display: flex;
  flex-direction: var(--greek-loop-order);
  justify-content: space-between;
  position: absolute;
  width: var(--widthPercent);
  margin-left: var(--marginLeftPercent);
  cursor: pointer;
}

.loop-viz,
.greeks {
  display: flex;
  width: 100%;
  align-items: var(--alignment-position);
}

.butt {
  width: 4px;
  height: 10px;
  background: var(--protein-color);
}

.mid {
  width: 100%;
  height: 4px;
  background: var(--protein-color);
}

.loop:hover .butt,
.loop:hover .mid {
  background: var(--hover-color);
}

.greek {
  width: 100%;
  height: 4px;
}
</style>