<template>
  <div id="juxtaposition" ref="juxtaposition">
    <div class="buttons">
      Scaffold:
      <span class="protein-name censor">
        {{ getScaffold.displayName }}:{{ getScaffold.chain }}
      </span>
      <LableButton
        @click="computeNewLoops('scaffold')"
        example-act="scaffold-download-loops"
        :spinTillResolved="scaffoldLoopComp"
        >Compute Loops</LableButton
      >
      <div class="prompt">
        <RemoveButton @click="deleteLoops({ proteinName: getScaffold.name })" />
        <div class="hint-text">Remove scaffold loops</div>
      </div>
    </div>
    <StraightendProtein
      class="protein"
      :protein="getScaffold"
      example-act="scaffold-loop-rep"
    />
    <div class="dividor"></div>
    <div class="buttons">
      Insert:
      <span class="protein-name censor">
        {{ getInsert.displayName }}:{{ getInsert.chain }}</span
      >
      <LableButton
        @click="computeNewLoops('insert')"
        :spinTillResolved="inserLoopComp"
        example-act="insert-download-loops"
        >Compute Loops</LableButton
      >
      <div class="prompt">
        <RemoveButton @click="deleteLoops({ proteinName: getInsert.name })" />
        <div class="hint-text">Remove insert loops</div>
      </div>
    </div>
    <StraightendProtein class="protein" :protein="getInsert" />
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import StraightendProtein from "./StraightendProtein";
import RemoveButton from "../PanelButtons/RemoveButton";
import LableButton from "../PanelButtons/TextLabelButton";

export default {
  name: "Juxtaposition",
  data() {
    return {
      editorMode: { name: "loop", description: "Loop Editor" },
      editorModes: [
        { name: "loop", description: "Loop Editor" },
        { name: "ss", description: "SS Editor" },
      ],

      scaffoldLoopComp: null,
      inserLoopComp: null,
    };
  },
  components: {
    StraightendProtein,
    RemoveButton,
    LableButton,
  },
  methods: {
    ...mapActions(["computeLoops", "deleteLoops"]),

    async computeNewLoops(proteinRole) {
      let protein =
        proteinRole == "scaffold" ? this.getScaffold : this.getInsert;
      let deletion = this.deleteLoops({ proteinName: protein.name });
      let computation = this.computeLoops(protein.name);
      let task = Promise.all([deletion, computation]);

      if (proteinRole == "scaffold") {
        this.scaffoldLoopComp = task;
      } else {
        this.inserLoopComp = task;
      }

      await deletion;
      await computation;
    },
  },
  computed: {
    ...mapGetters(["getProteins", "getScaffold", "getInsert"]),
  },
};
</script>

<style scoped>
#juxtaposition {
  width: 100%;
  padding-bottom: 5px;
}

.protein {
  margin-top: 5px;
}
.detail {
  width: 45%;
}
#details {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
#juxtaposition {
  display: flex;
  flex-direction: column;
}

.buttons {
  display: flex;
}
.buttons > * {
  margin: 0px 3px;
}
</style>