<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 } from "vuex";
import _ from "lodash";
import ClickOutside from "vue-click-outside";
import { color } from "d3-color";

// import PreviewPdbNumberLine from "./PreviewPdbNumberLine";

export default {
  props: ["protein", "from", "to", "preview"],
  components: {
    // PreviewPdbNumberLine,
    SegmentCreator,
    Sequence,
  },
  data() {
    return {
      selected: [],
      previewing: null,
    };
  },
  methods: {
    ...mapActions(["addCustomLoop"]),
    disableSelection() {
      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 };
    },
    colorBy() {
      let smartSequence = this;
      return function (acid) {
        return smartSequence.selectionBoundaries.first?.index <= acid.index &&
          acid.index <= smartSequence.selectionBoundaries.last?.index
          ? color(smartSequence.protein.color).brighter(1.2)
          : smartSequence.protein.color;
      };
    },
  },
  directives: {
    ClickOutside,
  },
};
</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>