<template>
  <div>
    <PanelControls class="controls" :name="`${detail.loop.id}`">
      <template v-if="mode == 'exploration'">
        From: {{ loopStart }} To: {{ loopEnd }}
        <!-- <MakeInterestingButton
          :want="isLoopWanted(detail.loop.id)"
          @click="toggleLoopWanted(detail.loop)"
        /> -->
        <div class="prompt">
          <ViewIn3dButton
            @click="
              zoomToLoop({ role: detail.protein.role, id: detail.loop.id })
            "
          />
          <div class="hint-text">View in 3D</div>
        </div>

        <div class="prompt">
          <MakeInterestingButton
            v-if="getScaffold.name == detail.protein.name"
            class="lastButton"
            :want="isLoopWanted(detail.loop.id)"
            @click="toggleLoopWanted(detail.loop)"
          />
          <div class="hint-text">Set as candidate loop</div>
        </div>
        <div class="prompt">
          <RemoveButton
            @click="
              deleteSingleLoop({
                proteinName: detail.protein.name,
                loop: detail.loop,
              })
            "
          />
          <div class="hint-text">Remove loop</div>
        </div>
        <div class="prompt">
          <CancelButton @click="removeLoopDetail(detail)" />
          <div class="hint-text">Close loop detail</div>
        </div>
      </template>
      <template v-else-if="mode == 'graftingScaffold'">
        From: {{ loopStart }} To: {{ loopEnd }}
        <MakeInterestingButton
          class="lastButton"
          :want="isLoopWanted(detail.loop.id)"
          @click="toggleLoopWanted(detail.loop)"
        />
      </template>
      <template v-else-if="mode == 'graftingInsert'">
        From: {{ loopStart }} To: {{ loopEnd }}

        <CancelButton class="lastButton" @click="$emit('remove-loop')" />
      </template>
    </PanelControls>
    <Sequence
      class="detail"
      :protein="detail.protein"
      :from="detail.loop.start"
      :to="detail.loop.end"
      :colorBy="() => color"
    />
    <div class="numbers">
      <div class="number distance">D: {{ round(detail.loop.distance, 2) }}</div>
      <div class="number delta">δ: {{ round(detail.loop.delta, 2) }}</div>
      <div class="number theta">θ: {{ round(detail.loop.theta, 2) }}</div>
      <div class="number rho">ϱ: {{ round(detail.loop.rho, 2) }}</div>
    </div>
    <div class="rectangles">
      <div
        class="number distance"
        :style="calculateDistanceColor(detail.loop.distance)"
      ></div>
      <div
        class="number delta"
        :style="calculateAngleColor(detail.loop.delta)"
      ></div>
      <div
        class="number theta"
        :style="calculateAngleColor(detail.loop.theta)"
      ></div>
      <div
        class="number rho"
        :style="calculateRhoAngleColor(detail.loop.rho)"
      ></div>
    </div>
  </div>
</template>

<script>
import { round } from "lodash";
import Sequence from "../StraightenedAcids/Sequence";
import PanelControls from "../PanelControls";
import GreeksMixin from "@/mixins/GreeksMixin";

import { mapActions, mapGetters, mapMutations } from "vuex";
import CancelButton from "../PanelButtons/CancelButton";
import RemoveButton from "../PanelButtons/RemoveButton";
import MakeInterestingButton from "../PanelButtons/MakeInterestingButton";
import ViewIn3dButton from "../PanelButtons/ViewIn3dButton";

export default {
  props: ["detail", "color", "mode"],
  components: {
    Sequence,
    PanelControls,
    RemoveButton,
    CancelButton,
    ViewIn3dButton,
    MakeInterestingButton,
  },
  methods: {
    ...mapActions([
      "zoomToLoop",
      "makeInterestingLoop",
      "deleteSingleLoop",
      "toggleLoopWanted",
    ]),
    ...mapMutations(["removeLoopDetail"]),
    round: round,
  },
  computed: {
    ...mapGetters(["isLoopWanted", "getScaffold", "getInsert"]),
    protein: function () {
      return this.detail.protein;
    },
    loop: function () {
      return this.detail.loop;
    },
    loopMinMax() {
      return this.detail.protein.minMaxPdbNumber;
    },
    loopStart: {
      get() {
        return this.detail.loop.start;
      },
    },
    loopEnd: {
      get() {
        return this.detail.loop.end;
      },
    },
  },
  mixins: [GreeksMixin],
};
</script>

<style scoped>
.detail {
  background: white;
  padding: 3px 5px;
  border-radius: 8px;
}
.numbers {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
}

.rectangles {
  height: 10px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
}

.number {
  padding: 0px 3px 0px 0px;
  color: black;
  vertical-align: middle;
  flex-grow: 1;
  text-align: center;
}

.positions {
  margin-top: -10px;
  display: flex;
  justify-content: space-between;
}
.positions > * {
  z-index: 100;
}
.location {
  width: 3em;
}
.lastButton {
  margin-left: 3px;
}
</style>