<template>
  <div class="sequence" v-click-outside="disableSelection">
    <div>
      <Sequence
        :enableSelection="true"
        :protein="protein"
        :from="from"
        :to="to"
        :colorBy="colorBy"
        v-model="selected"
      />
    </div>
    <!-- <PreviewPdbNumberLine :protein="protein" :previewingAcidData="previewing" /> -->
    <SegmentCreator
      :protein="protein"
      :acids="selectionBoundaries"
      @findloop="displayLoop($event)"
      @confirm="segmentProtein"
      @cancel="selected = []"
    />
  </div>
</template>

<script>
import SegmentCreator from "../SegmentCreator";
import Sequence from "./Sequence";
import { mapActions, mapMutations } from "vuex";
import _ from "lodash";
import ClickOutside from "vue-click-outside";
import ColorsMixin from "../../mixins/ColorsMixin";

// import PreviewPdbNumberLine from "./PreviewPdbNumberLine";

export default {
  props: ["protein", "from", "to", "preview"],
  components: {
    // PreviewPdbNumberLine,
    SegmentCreator,
    Sequence,
  },
  data() {
    return {
      selected: [],
      previewing: null,
    };
  },
  methods: {
    ...mapActions(["makeSelectionFromAcids", "addCustomLoop"]),
    ...mapMutations(["setProteinSelection"]),

    disableSelection() {
      this.selected = [];
    },

    selectionConfirmed() {
      let boundaryAcids = this.selectionBoundaries;
      this.$log.info(this.protein, boundaryAcids);
      this.makeSelectionFromAcids({
        protein: this.protein,
        acids: boundaryAcids,
      });
      this.selected = [];
    },

    segmentProtein({ name, from, to }) {
      this.addCustomLoop({
        proteinName: this.protein.name,
        region: { name, from, to },
      });

      this.selected = [];
    },
  },

  computed: {
    selectionBoundaries() {
      let acids = this.protein.getAcids(this.from, this.to);
      let first = acids[_.head(this.selected)];
      let last = acids[_.last(this.selected)];
      // this.$log.debug(first, last);
      return { first, last };
    },
  },

  watch: {
    selected(newSelected, oldSelected) {
      // prevents trigges when there are multiple sequences with click-outsides
      if (oldSelected.length == 0 && newSelected.length == 0) {
        return;
      }
      this.setProteinSelection({
        proteinName: this.protein.name,
        selection: newSelected,
      });
    },
  },
  directives: {
    ClickOutside,
  },
  mixins: [ColorsMixin],
};
</script>

<style scoped>
.selected {
  /* background-color: rgb(48, 183, 255); */
  background-color: var(--accent);
}

/* .inSegment {
  border-top: 3px var(--accent) solid;
  border-bottom: 3px var(--accent) solid;
} */
</style>