<template>
  <div>
    {{ getScaffold.representation }}
    <StraightendProtein
      class="protein"
      :protein="getScaffold"
      :loops="getWantedLoops"
      graftingMode="scaffold"
    />
    <div class="dividor"></div>
    {{ getInsert.representation }}

    <StraightendProtein
      class="protein"
      :protein="getInsert"
      graftingMode="insert"
    />

    <table class="loop-list">
      <tbody>
        <template v-for="loop in getWantedLoops">
          <td :key="loop.id + 'sep'" colspan="3">
            <div class="dividor"></div>
          </td>

          <tr :id="`pair-${loop.id}`" :key="loop.id">
            <td>
              <LoopDetail
                :key="loop.id"
                :detail="{ protein: getScaffold, loop: loop }"
                :color="getScaffold.color"
                mode="graftingScaffold"
              />
            </td>
            <td>
              <span class="arrow"></span>
            </td>
            <td v-if="loop.replacement == null">
              <LabelButton
                @click="pickFor(loop)"
                class="pair-button"
                :class="{
                  active: pickingFor != undefined && pickingFor.id == loop.id,
                }"
              >
                <div class="label-center">Pick Replacement Loop</div>
              </LabelButton>
            </td>
            <td v-else>
              <LoopDetail
                :key="loop.replacement.id"
                :detail="{ protein: getInsert, loop: loop.replacement }"
                :color="getInsert.color"
                mode="graftingInsert"
                @remove-loop="removeInsert(loop)"
              />
            </td>
          </tr>
          <tr  :id="`pairing-charts-${loop.id}`" :key="'charts' + loop.id">
            <td colspan="3" v-if="loop.replacement != null">
              <section class="charts">
                <Barchart
                  class="chart"
                  :details="[
                    { loop: loop, protein: getScaffold },
                    { loop: loop.replacement, protein: getInsert },
                  ]"
                  :selector="(l) => l.distance"
                  label="D"
                />
                <AngleDial
                  :details="[
                    { loop: loop, protein: getScaffold },
                    { loop: loop.replacement, protein: getInsert },
                  ]"
                  :selector="(l) => l.delta"
                  label="δ"
                />
                <AngleDial
                  :details="[
                    { loop: loop, protein: getScaffold },
                    { loop: loop.replacement, protein: getInsert },
                  ]"
                  :selector="(l) => l.theta"
                  label="θ"
                />
                <AngleDial
                  :details="[
                    { loop: loop, protein: getScaffold },
                    { loop: loop.replacement, protein: getInsert },
                  ]"
                  :selector="(l) => l.rho"
                  label="ϱ"
                  is360
                />
              </section>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import LabelButton from "./PanelButtons/TextLabelButton";
import LoopDetail from "./LoopDetails/LoopDetail";
import StraightendProtein from "./Juxtaposition/StraightendProtein";
import Barchart from "./GreeksComparsions/Barchart";
import AngleDial from "./GreeksComparsions/AngleDial";

export default {
  components: {
    LabelButton,
    LoopDetail,
    StraightendProtein,
    Barchart,
    AngleDial,
  },
  data() {
    return {
      sorting: { id: "position", label: "Position", selector: (l) => l.start },
    };
  },
  methods: {
    ...mapActions(["pickFor", "removeInsert"]),
  },
  computed: {
    ...mapGetters(["getWantedLoops", "getInsert", "getScaffold", "pickingFor"]),
    sorting_options() {
      return [
        { id: "position", label: "Position", selector: (l) => l.start },
        { id: "name", label: "Name", selector: (l) => l.id },
        {
          id: "min-distance",
          label: "Distance",
          selector: (l) => l.id,
        },
      ];
    },
  },
};
</script>

<style scoped>
.arrow {
  font-family: "EBI-Common";
  font-size: 30px;
  color: gray;
  margin-left: 10px;
}
.sort-by {
  display: flex;
  align-items: baseline;
}
.sort-select {
  width: 10em;
}
.label-center {
  display: flex;
  width: 100%;
  justify-content: center;
}
.button.active {
  background: var(--accent);
}
.pairings {
  display: flex;
}
.loop-list {
  width: 100%;
  padding: 10px;
}
td > .dividor {
  margin-top: 10px;
  margin-bottom: 10px;
}
.charts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 5px;
  border-radius: 10px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  background: white;
}
.charts > * {
  margin: 10px 10px;
}

table {
  border-spacing: 0;
}
.protein {
  padding: 5px;
}
</style>