<template>
  <div class="content view" v-click-outside="disableSelection">
    <Sequence
      :example-act="
        role == 'scaffold'
          ? 'scaffold-protein-adjustment'
          : 'insert-protein-adjustment'
      "
      :enableSelection="true"
      :protein="protein"
      :from="Number.NEGATIVE_INFINITY"
      :to="Number.POSITIVE_INFINITY"
      :colorBy="colorBy"
      v-model="selected"
      @change.native="doExampleSelection"
    />
    <SecondaryStructureEditor
      :protein="protein"
      :acids="selectionBoundaries"
      :example-act="
        role == 'scaffold'
          ? 'scaffold-protein-ss-editor'
          : 'insert-protein-ss-editor'
      "
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import _ from "lodash";
import { color } from "d3-color";
import SecondaryStructureEditor from "./SecondaryStructreEditor";
import Sequence from "../StraightenedAcids/Sequence";
import ClickOutside from "vue-click-outside";

export default {
  props: {
    role: {
      type: String,
    },
  },
  components: {
    SecondaryStructureEditor,
    Sequence,
  },
  data() {
    return {
      selected: [],
      examplemode_selected: [],
    };
  },
  methods: {
    disableSelection() {
      this.selected = [];
    },
    doExampleSelection() {
      this.examplemode_selected = [138, 143];
    },
  },
  computed: {
    ...mapGetters(["getProtein", "getRole", "exampleMode"]),
    protein() {
      return this.getRole(this.role);
    },

    colorBy() {
      return (acid) =>
        this.selectionBoundaries.first?.index <= acid.index &&
        acid.index <= this.selectionBoundaries.last?.index
          ? color(this.protein.color).brighter(6)
          : 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: {
    selectionBoundaries(selection) {
      this.protein.setSelection(selection);
    },
  },
  directives: {
    ClickOutside,
  },
};
</script>

<style>
</style>