<template>
  <div>
    <PanelControls class="controls" :name="`${detail.loop.id}`">
      <template v-if="mode == 'exploration'">
        From:
        <input
          class="location"
          type="number"
          v-model="loopStart"
          :min="loopMinMax.min"
          :max="loopMinMax.max"
        />
        To:
        <input
          class="location"
          type="number"
          v-model="loopEnd"
          :min="loopMinMax.min"
          :max="loopMinMax.max"
        />
        <!-- <MakeInterestingButton
          :want="isLoopWanted(detail.loop.id)"
          @click="toggleLoopWanted(detail.loop)"
        /> -->
        <ViewIn3dButton @click="zoomToLoop(detail)" />
        <MakeInterestingButton
          v-if="getScaffold.name == detail.protein.name"
          class="lastButton"
          :want="isLoopWanted(detail.loop.id)"
          @click="toggleLoopWanted(detail.loop)"
        />
        <RemoveButton
          @click="
            deleteLoop({ proteinName: detail.protein.name, loop: detail.loop })
          "
        />
        <CancelButton @click="removeLoopDetail(detail)" />
      </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"
        :style="calculateDistanceColor(detail.loop.distance)"
      >
        D: {{ round(detail.loop.distance, 2) }}
      </div>
      <div class="number delta" :style="calculateAngleColor(detail.loop.delta)">
        δ: {{ round(detail.loop.delta, 2) }}
      </div>
      <div class="number theta" :style="calculateAngleColor(detail.loop.theta)">
        θ: {{ round(detail.loop.theta, 2) }}
      </div>
      <div class="number rho" :style="calculateRhoAngleColor(detail.loop.rho)">
        ϱ: {{ round(detail.loop.rho, 2) }}
      </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",
      "deleteLoop",
      "toggleLoopWanted",
    ]),
    ...mapMutations(["removeLoopDetail", "setLoopLocation"]),
    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;
      },
      set(value) {
        this.setLoopLocation({
          proteinName: this.detail.protein.name,
          loop_id: this.detail.loop.id,
          location: {
            start: Number(value),
            end: this.detail.loop.end,
          },
        });
      },
    },
    loopEnd: {
      get() {
        return this.detail.loop.end;
      },
      set(value) {
        this.setLoopLocation({
          proteinName: this.detail.protein.name,
          loop_id: this.detail.loop.id,
          location: {
            start: this.detail.loop.start,
            end: Number(value),
          },
        });
      },
    },
  },
  mixins: [GreeksMixin],
};
</script>

<style scoped>
.detail {
  background: var(--neutral);
  padding: 3px 5px;
}
.numbers {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
}
.number {
  padding: 0px 3px;
  color: white;
  vertical-align: middle;
  flex-grow: 1;
  text-align: center;
  text-shadow: 0.05em 0 black, 0 0.05em black, -0.05em 0 black, 0 -0.05em black,
    -0.05em -0.05em black, -0.05em 0.05em black, 0.05em -0.05em black,
    0.05em 0.05em black;
}

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