<template>
  <div example-act="ccors-exploration">
    <div>
      Compare Replaced to
      <input v-model="active" type="checkbox" id="active-ccor" />
      <label for="active-ccor">Replaced</label>
      <input v-model="removed" type="checkbox" id="removed-ccor" />
      <label for="removed-ccor">Preserved</label>
    </div>
    <div class="sort-by">
      Sort loops by
      <Multiselect
        class="sort-select"
        v-model="sorting"
        :options="sorting_options"
        :searchable="false"
        :hide-selected="true"
        select-label=""
        track-by="id"
        label="label"
      />
    </div>
    <div>
      <input v-model="showNums" type="checkbox" id="show-nums" />
      <label for="show-nums"> Show numerical values </label>
    </div>
    <div class="viz">
      Loop to Loop:
      <Scale
        :maximum="1"
        :range="scale_range"
        :mapper="transpaernt_ccors_scale"
        scaleSize="true"
      />

      Maximum of secondary structure to coil:
      <Scale
        :maximum="1"
        :range="scale_range"
        :mapper="ccors_scale"
        scaleSize="true"
      />

      <table class="ccors">
        <thead>
          <tr>
            <th></th>
            <th></th>
            <th
              v-for="loop in sorted_wanted_loops"
              :key="loop.id + 'ccros_acitive'"
            >
              <div class="rotated censor">
                {{ loop.id }}
              </div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr
            :id="`ce-${loop.id}`"
            v-for="loop in considered_loops"
            :key="loop.id + 'ccros_rest'"
          >
            <th>
              <span
                @click="toggleLoopWanted(loop)"
                class="toggle-button"
                :class="{
                  want: isLoopWanted(loop.id),
                  remove: !isLoopWanted(loop.id),
                }"
              ></span>
            </th>
            <th class="censor">
              {{ loop.id }}
            </th>
            <CorrelationMatrixSquare
              :maximum_subcorrelaiton="
                loop.maximumSubCorrelationWith(active_loop.id)
              "
              :correlation="loop.loopCorrelationWith(active_loop.id)"
              :hide="loop.id == active_loop.id"
              :showNumber="showNums"
              :correlation_scale="transpaernt_ccors_scale(-1, 1)"
              :maximum_subcorrelation_scale="ccors_scale(-1, 1)"
              v-for="active_loop in sorted_wanted_loops"
              :key="active_loop.id + 'ccros_data'"
            />
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { sortBy } from "lodash";
import CorrelationMatrixSquare from "./CrosscorrelationVisualization/CorrelationMatrixSquare";
import Multiselect from "vue-multiselect";
import Scale from "./Scale";
import * as d3 from "d3";
import _ from "lodash";
export default {
  data() {
    return {
      active: false,
      removed: true,
      showNums: false,
      sorting: {
        id: "position",
        label: "Position",
        selector: (l) => l.start,
      },
      scale_range: _.range(-1, 1, 0.2),
    };
  },
  components: {
    CorrelationMatrixSquare,
    Multiselect,
    Scale,
  },
  methods: {
    ...mapActions(["toggleLoopWanted"]),

    ccors_scale(min, max) {
      return (
        d3
          .scaleLinear()
          .domain([min, 0, max])
          // .interpolate(d3.interpolateRgb.gamma(1.5))
          .range(["#B07AA1", "grey", "#1539bc"])
      );
    },

    transpaernt_ccors_scale(min, max) {
      return (
        d3
          .scaleLinear()
          .domain([min, 0, max])
          // .interpolate(d3.interpolateRgb.gamma(1.5))
          .range(["#B07AA155", "#80808055", "#1539bc55"])
      );
    },

    maximum_subcorrelation(loop1, loop2) {
      let segmentations = this.getScaffold.segmentation;
      let loop1_segment = segmentations.getSegmentByName(loop1.id);
      let loop2_segment = segmentations.getSegmentByName(loop2.id);

      let loop1_secses = loop1_segment.ss_segment_list.map((name) =>
        segmentations.getSegmentByName(name)
      );
      let loop2_secses = loop2_segment.ss_segment_list.map((name) =>
        segmentations.getSegmentByName(name)
      );

      let maximum = 0.0;
      for (let loop1_secs of loop1_secses) {
        for (let loop2_secs of loop2_secses) {
          let value = this.getScaffold.secs_crosscol["anm"][loop1_secs.name][
            loop2_secs.name
          ].value;
          if (
            loop1_secs.name.startsWith("C") &&
            Math.abs(value) >= Math.abs(maximum)
          ) {
            maximum = value;
          }
        }
      }
      return maximum;
    },
  },
  computed: {
    ...mapGetters([
      "getScaffold",
      "getWantedLoops",
      "getRemovedLoops",
      "getMaxCcorWithActive",
      "getMaxCoilCcorWithActive",
      "isLoopWanted",
    ]),
    sorting_options() {
      return [
        { id: "position", label: "Position", selector: (l) => l.start },
        { id: "name", label: "Name", selector: (l) => l.id },
        {
          id: "max-ccor",
          label: "Loop to Loop",
          selector: (l) => -this.getMaxCcorWithActive(l.id, (l, l2id) => l.loopCorrelationWith(l2id)),
        },
        {
          id: "max-coil-ccor",
          label: "Maximal SS to Coil",
          selector: (l) => -this.getMaxCcorWithActive(l.id, (l, l2id) => l.maximumSubCorrelationWith(l2id)),
        },
      ];
    },
    considered_loops() {
      let all_considered_loops = (this.active
        ? this.getWantedLoops
        : []
      ).concat(this.removed ? this.getRemovedLoops : []);

      return sortBy(all_considered_loops, this.sorting.selector);
    },

    sorted_wanted_loops() {
      return sortBy(
        this.getWantedLoops,
        this.sorting_options.find((s) => s.id == "position").selector
      );
    },
  },
};
</script>

<style scoped>
.legend {
  display: flex;
}
.rotated {
  /* width: 2.5em;
  margin-bottom: 1em;
  margin-top: 4em;
  transform: rotate(-90deg); */
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  width: 2.2em;
  margin-right: 0.5em;
  text-align: center;
}
.sort-by {
  display: flex;
  align-items: center;
}
.sort-select {
  width: 15em;
}
.viz {
  background: white;
  padding: 10px;
  border-radius: 10px;
}
.ccors {
  border-spacing: 0;
}
tbody > tr:nth-child(odd) {
  background: var(--neutral);
}
.toggle-button::before {
  font-family: "EBI-Common";
  font-size: 14px;
  margin-left: 3px;
}
.want::before {
  content: "";
}
.remove::before {
  content: "";
}
.toggle-button:hover {
  color: var(--accent);
}
</style>