<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="
        (event) => {
          setPreview({
            event,
            description: {
              Name: loop.id,
              D: round(loop.distance, 2),
              δ: round(loop.delta, 2),
              θ: round(loop.theta, 2),
              ρ: round(loop.rho, 2),
              Start: loop.start,
              End: loop.end,
            },
          });
          highlightLoop(loop);
        }
      "
      @mouseleave="
        () => {
          setPreview(null);
          highlightLoop(null);
        }
      "
    >
      <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", "setProteinSelection"]),
    ...mapActions(["addLoopDetail", "pickFor", "selectInsert"]),
    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;
    },

    highlightLoop(loop) {
      if (loop == null) {
        this.setProteinSelection({
          proteinName: this.protein.name,
          selection: [],
        });
        return;
      }
      let start = this.protein.getAcid(loop.start).index;
      let end = this.protein.getAcid(loop.end).index;

      let selection = [start, end];

      this.setProteinSelection({ proteinName: this.protein.name, selection });
    },

    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);

      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 {
        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.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.selectInsert(loop);
      } else {
        this.addLoopDetail({ protein: this.protein, loop });
      }
    },
  },
  computed: {
    ...mapGetters(["isLoopWanted", "pickingFor"]),
  },
};
</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);
}

.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>