<template>
  <div class="protein" ref="protein">
    <LoopRow
      class="loop-row"
      v-if="loopTable.length > 0"
      :loops="loopTable[0]"
      :protein="protein"
      is-first="true"
      :graftingMode="graftingMode"
    />
    <SmartSequence
      :protein="protein"
      :from="Number.NEGATIVE_INFINITY"
      :to="Number.POSITIVE_INFINITY"
      :selectable="true"
    />

    <LoopRow
      v-for="(loops, index) in loopTable.slice(1)"
      :key="`loop-${index}`"
      :loops="loops"
      :protein="protein"
      :graftingMode="graftingMode"
    />
  </div>
</template>

<script>
import LoopRow from "./StraightenedLoops/LoopRow";
import SmartSequence from "../StraightenedAcids/SmartSequence";
import TabularizeMixin from "@/mixins/TabularizeMixin";

export default {
  name: "StraightendProtein",
  props: {
    protein: {
      type: Object,
    },
    loops: {
      type: Array,
      default: null,
    },
    graftingMode: {
      type: String,
      default: null,
    },
  },
  components: {
    SmartSequence,
    LoopRow,
  },
  computed: {
    loopTable: function () {
      let loops = this.loops ?? this.protein.loops;
      return this.tabularizeSegments(
        loops.filter((l) => l.chain == this.protein.chain),
        (l) => l.start,
        (l) => l.end,
        false
      );
    },
  },
  mixins: [TabularizeMixin],
};
</script>

<style scoped>
.protein {
  padding: 0px 5px;
  background-color: white;
  border-radius: 10px;
}
</style>