<template>
  <div class="loader">
    <div class="source content" v-if="step === 'source'">
      <LabelButton
        type="button"
        class="menubutton"
        id="uploadPDBsButton"
        @click="setSource('upload')"
      >
        Upload PDB
      </LabelButton>
      <LabelButton
        :example-act="role == 'scaffold' ? 'scaffold-source' : 'insert-source'"
        type="button"
        class="menubutton"
        @click="setSource('rcsb')"
      >
        Load PDB from RCSB
      </LabelButton>
      <!-- <LabelButton>
        Load Example ({{ role == "scaffold" ? "2PSF" : "The other one" }})
      </LabelButton> -->
    </div>
    <div class="content" v-else-if="step === 'load'">
      <UploadCustomPDB
        v-if="source == 'upload'"
        :role="role"
        @loaded="setProtein"
        @cancel="remove"
      />
      <DownloadFromRCBS
        v-else-if="source == 'rcsb'"
        :role="role"
        @loaded="setProtein"
        @cancel="remove"
      />
    </div>
    <div
      class="content view"
      v-else-if="step === 'view'"
      v-click-outside="disableSelection"
    >
      <Sequence
        :example-act="
          role == 'scaffold'
            ? 'scaffold-protein-adjustment'
            : 'insert-protein-adjustment'
        "
        :enableSelection="true"
        :protein="getRole(role)"
        :from="Number.NEGATIVE_INFINITY"
        :to="Number.POSITIVE_INFINITY"
        :colorBy="colorBy"
        v-model="selected"
        @change.native="examplemode"
      />
      <SecondaryStructureEditor
        :protein="getRole(role)"
        :acids="selectionBoundaries"
        :example-act="
          role == 'scaffold'
            ? 'scaffold-protein-ss-editor'
            : 'insert-protein-ss-editor'
        "
      />
    </div>
  </div>
</template>

<script>
import UploadCustomPDB from "./UploadCustomPDB";
import DownloadFromRCBS from "./DownloadFromRCBS";
import Sequence from "../StraightenedAcids/Sequence";
import SecondaryStructureEditor from "./SecondaryStructreEditor";
import ClickOutside from "vue-click-outside";
import LabelButton from "../PanelButtons/TextLabelButton";
import { mapActions, mapGetters } from "vuex";
import _ from "lodash";
import { color } from "d3-color";

export default {
  props: ["role"],
  components: {
    UploadCustomPDB,
    DownloadFromRCBS,
    Sequence,
    SecondaryStructureEditor,
    LabelButton,
  },
  data() {
    return {
      step: "source",
      possibleSteps: ["source", "load", "view"],
      source: null,
      proteinName: null,
      selected: [],
      examplemode_selected: [],
    };
  },

  methods: {
    ...mapActions(["removeProtein", "removeRole"]),
    examplemode() {
      this.examplemode_selected = [138, 143];
    },
    setSource(source) {
      this.source = source;
      this.step = "load";
    },

    setProtein(proteinName) {
      this.proteinName = proteinName;
      this.step = "view";
    },

    disableSelection() {
      this.selected = [];
    },
    remove() {
      this.step = "source";
      this.removeRole(this.role);
    },
  },

  computed: {
    ...mapGetters(["getProtein", "getRole", "exampleMode"]),

    restarted() {
      return this.getRole(this.role) == null;
    },

    protein() {
      return this.proteinName != null
        ? this.getProtein(this.proteinName)
        : null;
    },

    colorBy() {
      return (acid) =>
        this.selectionBoundaries.first?.index <= acid.index &&
        acid.index <= this.selectionBoundaries.last?.index
          ? color(this.protein.color).brighter(1.2)
          : this.protein.color;
    },
    selectionBoundaries() {
      let selectionSource = this.selected;

      if (this.exampleMode) {
        selectionSource = this.examplemode_selected;
      }
      let acids = this.protein.acids;
      let first = acids[_.head(selectionSource)];
      let last = acids[_.last(selectionSource)];
      return { first, last };
    },
  },

  watch: {
    restarted(isRestarted) {
      if (isRestarted) {
        this.step = "source";
      }
    },
  },

  directives: {
    ClickOutside,
  },
};
</script>

<style scoped>
.role::first-letter {
  text-transform: uppercase;
}
.loader {
  display: flex;
  width: 100%;
}
.content {
  width: 100%;
}
.source {
  display: flex;
  justify-items: stretch;
}
.source > * {
  margin: 5px;
}
.view {
  background: white;
  border-radius: 10px;
  padding: 3px 10px;
}
.remove {
  height: 25px;
}
</style>