<template>
  <div>
    <Sequence
      v-if="proteinMode == 'none'"
      :protein="protein"
      :from="Number.NEGATIVE_INFINITY"
      :to="Number.POSITIVE_INFINITY"
      :colorBy="() => '#BBB'"
    />
    <div
      class="sequence-wrapper"
      v-for="(type, type_index) in methods"
      :key="type"
    >
      <div class="dividor" v-if="type_index != 0"></div>

      {{ type }}:
      <Sequence
        :protein="protein"
        :from="Number.NEGATIVE_INFINITY"
        :to="Number.POSITIVE_INFINITY"
        v-if="proteinMode == 'per-secondary'"
        :colorBy="(acid) => ss_scale(acid.bfactors.secondary_structure[type])"
      />
      <Sequence
        :protein="protein"
        :from="Number.NEGATIVE_INFINITY"
        :to="Number.POSITIVE_INFINITY"
        v-if="proteinMode == 'per-residue'"
        :colorBy="(acid) => res_scale(acid.bfactors.residue[type])"
      />
      <FlexibilitySegmentRow
        class="segment-row"
        v-for="(segments, index) in segmentsTable"
        :key="index"
        :segments="segments"
        :protein="protein"
        :scale="loop_scale"
        :type="type"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Sequence from "../StraightenedAcids/Sequence";
import TabularizeMixin from "@/mixins/TabularizeMixin";
import FlexibilitySegmentRow from "./FlexibilitySegmentRow";

export default {
  props: ["protein", "scale", "methods", "proteinMode"],
  components: {
    Sequence,
    FlexibilitySegmentRow,
  },
  computed: {
    ...mapGetters(["getBFactorsByProtein"]),
    segmentsTable: function () {
      return this.tabularizeSegments(
        this.protein.loops,
        (s) => s.start,
        (s) => s.end,
        true
      );
    },

    ss_scale() {
      return this.scale(
        -this.protein.absolute_ss_maximum,
        this.protein.absolute_ss_maximum
      );
    },

    res_scale() {
      return this.scale(
        -this.protein.absolute_acid_maximum,
        this.protein.absolute_acid_maximum
      );
    },

    loop_scale() {
      return this.scale(
        -this.protein.absolute_loop_maximum,
        this.protein.absolute_loop_maximum
      );
    },
  },
  mixins: [TabularizeMixin],
};
</script>

<style scoped>
.segment-row {
  height: 10px;
  width: 100%;
  margin-bottom: 2px;
}

</style>