<template>
  <table class="matrix">
    <tr
      v-for="(line, lineIndex) in correlationMatrix"
      :key="`line-${lineIndex}`"
      :class="{ redundant: lineIndex == 0 }"
      class="line"
    >
      <th class="downtype">{{ types[lineIndex] }}</th>
      <CorrelationMatrixSquare
        :value="val.R"
        :p="val.p"
        v-for="(val, colIndex) in line"
        :class="{ redundant: lineIndex <= Number(colIndex) }"
        :key="`val-${colIndex}`"
        :scale="scale"
        @mouseenter.native="
          setPreview({ $event, description: { R: round(val.R, 2), p: round(val.p, 2) } })
        "
        @mouseleave.native="setPreview(null)"
      />
    </tr>
    <tr class="line">
      <th class="downtype"></th>
      <div class="types">
        <th
          v-for="(type, index) in types"
          :key="`type-${index}`"
          :class="{ redundant: index == types.length - 1 }"
        >
          {{ type }}
        </th>
      </div>
    </tr>
  </table>
</template>

<script>
import CorrelationMatrixSquare from "./CorrelationMatrixSquare";
import { mapMutations } from "vuex";
import RoundMixin from "../../../mixins/RoundMixin"

export default {
  props: {
    correlationMatrix: Array,
    types: Array,
    scale: Function,
  },
  methods: {
    ...mapMutations(["setPreview"]),
  },
  components: {
    CorrelationMatrixSquare,
  },
  mixins: [RoundMixin],
};
</script>

<style scoped>
.matrix {
  display: flex;
  flex-direction: column;
  height: auto;
}

.types {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.downtype {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  flex-shrink: 0;
}

.line {
  display: flex;
  direction: row;
  /* width: 100%; */
}

.redundant {
  visibility: hidden;
  height: 0px;
}
</style>