<template>
  <div>
    <div
      class="sequence-wrapper"
      v-for="type in getBFactorsByProtein(this.protein.name).types"
      :key="type"
    >
      <Button @click="setThreeDProtein({protein, flexibility:type})"/>
      {{type}}:
      <Sequence
        :protein="protein"
        :from="Number.NEGATIVE_INFINITY"
        :to="Number.POSITIVE_INFINITY"
        :colorBy="relativeBfactor(type)"
        :additionalData="{
          'Rel. B-factor': getBfactor(type) 
        }"
      />
    </div>

  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";

import Sequence from "../StraightenedAcids/Sequence";
import Button from "../PanelButtons/ViewIn3dButton";

export default {
  props: ["protein", "scale"],
  components: {
    Sequence,
    Button
  },



  computed: {
    ...mapGetters(["getProteins", "getBFactorsByProtein"])
  },
  methods: {
    ...mapMutations(["setThreeDProtein"]),
    relativeBfactor(type) {

      let scale = this.scale;
      let bfactors = this.getBFactorsByProtein(this.protein.name);
      return function(acid) {
        //stupid high complexity
        let bfactor;
        // if (bfactors.segmentation == null) {
          bfactor = bfactors.values.find(b => b.num == acid.pdb_number);
        // } else {
        //   let segment = this.protein.segmentation.getSegment(acid);
        //   if (segment != null) {
        //     bfactor = bfactors.values.find(b => b.segment == segment.name);
        //   }
        // }

        if (bfactor == null) {
          return "darkgray";
        }
        let value = bfactor[type];

        // console.log(scale(bfactors.values.find(b => b.num == acid.pdb_number)[type]));

        return scale(value);
      };
    },

    getBfactor(type) {
      let bfactors = this.getBFactorsByProtein(this.protein.name);
      return function(acid) {
        let value = bfactors.values.find(b => b.num == acid.pdb_number)[type];
        return value;
      };
    }
  }
};
</script>

<style scoped>
</style>