<template>
  <div class="display multiselector">
    <PanelControls
      class="close"
      :name="`${protein.displayName}:${protein.chain}`"
    >
      <!-- <RemoveButton @click="removeBfactors" /> TODO: redo the action -->
      <template v-for="flex in sorted(protein.availableBfactors)">
        <input
          :key="`${flex}-checkbox`"
          type="checkbox"
          :id="`${flex}-checkbox`"
          v-model="pickedFlexibilities"
          :value="flex"
        />
        <label :key="`${flex}-checkbox-label`" :for="`${flex}-checkbox`">{{
          flex
        }}</label>
      </template>
      <div class="sources" example-act="flexibility-ss">
        <Multiselect
          v-model="pickedProteinFlexibilityMode"
          :options="proteinFlexibilityModes"
          :searchable="false"
          :hide-selected="true"
          select-label=""
          track-by="id"
          label="label"
          placeholder="B-factor sources"
        />
      </div>
    </PanelControls>
    <div class="vizualizations">
      <div class="bfactors">
        <Scale
          :maximum="protein.absolute_loop_maximum"
          :range="scale_range"
          :mapper="make_flexibility_scale"
          minLabel="Rigid"
          maxLabel="Flexible"
        />
        <FlexibilitySegmentationVizualization
          example-act="flexibility-exploration"
          :protein="protein"
          :scale="make_flexibility_scale"
          :methods="sorted(pickedFlexibilities)"
          :proteinMode="pickedProteinFlexibilityMode.id"
        />
      </div>
    </div>
    <Hidable
      name="Method correlation"
      example-act="flexibility-exploration-methods"
      v-if="protein.availableBfactors.length > 1"
      minimize="false"
    >
    <div class="row">
      <div class="column">
        <CorrelationMatrix
          class="type-corr"
          :correlationMatrix="protein.bfactorCorrelation"
          :types="protein.availableBfactors"
          :scale="make_correlation_scale(-1, 1)"
        />
      </div>
      <div class="column">
        <div class="legend">
          
          <Scale
            :maximum="1"
            :range="corr_range"
            :mapper="make_correlation_scale"
            scaleSize="true"
            minLabel="Different"
            maxLabel="Similiar"
          />
          <div class="fuzzy-example">
            <span><span class="prob">p</span> > 0.5 </span>
            <div></div>
          </div>
        </div> 
      </div>
    </div>
    </Hidable>
  </div>
</template>

<script>
import * as d3 from "d3";

import CorrelationMatrix from "./CorrelationMatrix/CorrelationMatrix";
import FlexibilitySegmentationVizualization from "./FlexibilitySegmentationVizualization";
import PanelControls from "../PanelControls";
import { mapGetters } from "vuex";
import _ from "lodash";
import Hidable from "../Hidable";
import Multiselect from "vue-multiselect";
import Scale from "../Scale";

export default {
  components: {
    CorrelationMatrix,
    PanelControls,
    FlexibilitySegmentationVizualization,
    Hidable,
    Multiselect,
    Scale,
  },
  data() {
    return {
      scale_range: _.range(-1, 1, 0.2),
      corr_range: _.range(-1, 1, 0.3),

      pickedFlexibilities: [...this.protein.availableBfactors],
      pickedProteinFlexibilityMode: {
        label: "None",
        id: "none",
      },
      proteinFlexibilityModes: [
        {
          label: "None",
          id: "none",
        },
        {
          label: "Per residue",
          id: "per-residue",
        },
        {
          label: "Per SS",
          id: "per-secondary",
        },
      ],
    };
  },

  props: ["protein"],
  methods: {
    sorted(array) {
      return _.sortBy(array);
    },
    make_flexibility_scale(min, max) {
      return d3
        .scaleLinear()
        .domain([min, 0, max])
        .interpolate(d3.interpolateRgb.gamma(1.5))
        .range(["#1f77b4", "#999", "#ff7f0e"]);
    },
    make_correlation_scale(min, max) {
      return d3
        .scalePow()
        .exponent(2)
        .domain([min, 0, max])
        .range(["darkred", "grey", "#597b75"]);
    },
  },
  computed: {
    ...mapGetters(["getProteins"]),
  },
};
</script>

<style scoped>
.types {
  width: 200px;
  margin: 10px;
  background-color: var(--neutral);
  padding: 15px;
}

.bfactors {
  width: 100%;
}
.sources {
  width: 10em;
}

.column {
  width: auto;
  margin-bottom: 0px;
  margin-top: auto;
}

.legend {
  display: flex;
}

.vizualizations {
  display: flex;
  background: white;
  padding: 5px;
  border-radius: 10px;
}
.crosscorelations {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.display {
  background: var(--neutral);
  padding: 5px;
}
.sequence-wrapper > * {
  flex-grow: 1;
}
.type-corr {
  width: 180px;
}

.fuzzy-example {
  margin: 10px;

  margin-left: 20px;
}
.fuzzy-example > div {
  width: 15px;
  height: 15px;
  background: grey;
  display: inline-block;
  filter: blur(3px);
}
.prob {
  font-style: italic;
}
</style>