<template>
  <div>
    <div>
      <p>
        Total number of solutions: {{ getSolutionCount }}
        <br />
        Solutions per page:
        <input
          class="page-input"
          type="number"
          name="page"
          v-model="solutionsPerPage"
          min="1"
        />
      </p>
    </div>
    <table>
      <thead>
        <th></th>
        <th>
          Experiment
          <span
            class="sort-button"
            @click="sortByKey('GRAFT_MUTANT_ID')"
            :class="{ 'sorted-by': this.sortBy == 'GRAFT_MUTANT_ID' }"
            ></span
          >
        </th>
        <th>
          DOPE score
          <span
            class="sort-button"
            @click="sortByKey('MODELLER_DOPE_SCORE')"
            :class="{ 'sorted-by': this.sortBy == 'MODELLER_DOPE_SCORE' }"
            ></span
          >
        </th>
        <th>
          Rossetta score
          <span
            class="sort-button"
            @click="sortByKey('ROSETTA_FASTRELAX_SCORE')"
            :class="{ 'sorted-by': this.sortBy == 'ROSETTA_FASTRELAX_SCORE' }"
            ></span
          >
        </th>
        <th>
          Inserts
          <span
            class="sort-button"
            @click="sortByKey('INSERT_COUNT')"
            :class="{ 'sorted-by': this.sortBy == 'INSERT_COUNT' }"
            ></span
          >
        </th>
        <th>Length</th>
        <th class="preview">Preview</th>
      </thead>
      <tr>
        <td class="dividor" colspan="7"></td>
      </tr>
      <tbody>
        <tr
          class="clickable"
          @click="loadFullSolution(solution)"
          v-for="solution in getSolutions"
          :key="solution.experiment_name"
          :class="{
            selected: getSolution && getSolution.name == solution.name,
          }"
        >
          <td>
            <span class="show">⬤</span>
          </td>
          <td>
            {{ solution.order }}
          </td>
          <td>
            {{ round(solution.dope, 2) }}
          </td>
          <td>
            {{ round(solution.rosetta, 2) }}
          </td>
          <td>
            {{ solution.replacments }}
          </td>
          <td>
            {{ solution.sequencePreview.length }}
          </td>
          <td class="preview">
            <SolutionPreview :solution="solution" />
          </td>
        </tr>
      </tbody>
    </table>

    <p>
      Page:
      <button @click="previousPage">&lt;</button>

      <input
        class="page-input"
        type="number"
        name="page"
        v-model.number="page"
      />
      <button @click="nextPage">&gt;</button>

      / {{ Math.floor(getSolutionCount / solutionsPerPage) + 1 }}
    </p>
    <div class="downloads">
      <TextLabelButton @click="userDownloadAllSolutions"
        >Download all solutions</TextLabelButton
      >
      <TextLabelButton @click="userDownloadScoreTable"
        >Download score table</TextLabelButton
      >
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations } from "vuex";
import SolutionPreview from "../components/SolutionPreview";
import TextLabelButton from "../components/PanelButtons/TextLabelButton";
import RoundMixin from "../mixins/RoundMixin";

export default {
  data() {
    return {
      solutionsPerPage: 10,
      page: 1,
      sortBy: "GRAFT_MUTANT_ID",
      descending: "descending",
    };
  },
  components: {
    SolutionPreview,
    TextLabelButton,
  },

  methods: {
    ...mapActions([
      "downloadSolution",
      "downloadSolutions",
      "downloadSolutionCount",
      "userDownloadAllSolutions",
      "userDownloadScoreTable",
    ]),
    ...mapMutations(["setSolutionMeta"]),
    downloadSolutionsBySettings() {
      this.downloadSolutionCount();
      return this.downloadSolutions({
        solutionsPerPage: this.solutionsPerPage,
        page: this.page - 1,
        sortBy: this.sortBy,
        descending: this.descending,
      });
    },
    loadFullSolution(meta) {
      this.setSolutionMeta({ solutionMeta: meta });
      this.downloadSolution({ name: meta.name });
    },
    sortByKey(key) {
      if (key == this.sortBy) {
        this.flipDescending();
      } else {
        this.sortBy = key;
      }
    },
    flipDescending() {
      if (this.descending == "descending") {
        this.descending = "ascending";
      } else {
        this.descending = "descending";
      }
    },
    previousPage() {
      if (this.page >= 1) {
        this.page -= 1;
      }
    },
    nextPage() {
      if (
        this.page <
        Math.floor(this.getSolutionCount / this.solutionsPerPage) + 1
      ) {
        this.page += 1;
      }
    },
  },
  computed: {
    ...mapGetters(["getSolutions", "getSolutionCount", "getSolution"]),
  },
  mounted() {
    this.downloadSolutionsBySettings();
  },
  watch: {
    solutionsPerPage(newValue) {
      this.downloadSolutionsBySettings();
    },
    page(newValue) {
      this.downloadSolutionsBySettings();
    },
    sortBy(newValue) {
      this.downloadSolutionsBySettings();
    },
    descending(newValue) {
      this.downloadSolutionsBySettings();
    },
  },
  mixins: [RoundMixin],
};
</script>

<style scoped>
.preview {
  width: 50%;
}
.page-input {
  width: 3em;
}

td {
  text-align: center;
  padding: 4px 8px;
}
th {
  white-space: nowrap;
  color: #444;
  padding: 4px 8px;
}

.dividor {
  padding: 0px 8px;
}

table {
  table-layout: auto;
  width: 100%;
  border-spacing: 0;
  background: white;
  border-radius: 10px;
  padding: 0px 5px;
}

td:last-child {
  margin-bottom: 15px;
}
td:nth-child(even) {
  background: #dddddd;
}

td:nth-child(odd) {
  background: #eeeeee;
}
.sort-button {
  font-family: "EBI-Common";
  font-size: 15px;
  cursor: pointer;
}
.sort-button:hover {
  color: var(--accent50);
}
.sorted-by {
  color: var(--accent);
}

.show {
  color: #999;
}

.show:hover,
tr:hover .show {
  color: var(--accent50);
}

.selected .show {
  color: var(--accent);
}

.selected td:nth-child(even) {
  background: #efefef;
}

.selected td:nth-child(odd) {
  background: #fcfcfc;
}

tr:hover {
  opacity: 0.7;
}

.clickable {
  cursor: pointer;
}
.downloads {
  display: flex;
}
.downloads > * {
  margin: 4px;
}

/* Chrome, Safari, Edge, Opera */
.page-input::-webkit-outer-spin-button,
.page-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.page-input {
  -moz-appearance: textfield;
}
</style>