<template>
  <div class="prompt" v-if="!getPregraftData">
    <LabelButton example-act="graft-start" class="start" @click="() => {pregraftPromise = pregraft()}" :spinTillResolved="pregraftPromise">
      Compute grafting sequences.
    </LabelButton>
  </div>
  <div class="presolution" v-else>
    <p>
      We have
      <span class="solution_number">{{
        getPregraftData.sequences.length
      }}</span>
      possible solutions.
      <span class="warning" v-if="getPregraftData.sequences.length >= 1000">
        You have over 1000 possible sequences. Due to FUP, only 1000 sequences
        will be modelled.</span
      >
    </p>
    <LabelButton
      example-act="download-seq"
      @click="downloadSolutionSequences"
      class="download"
    >
      Download solution sequences</LabelButton
    >

    <p v-if="!getGraftingStarted">
      <LabelButton
        example-act="graft-final"
        @click="startModelling()"
        class="download"
      >
        Start modelling</LabelButton
      >
    </p>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import { saveAs } from "file-saver";
import LabelButton from "./PanelButtons/TextLabelButton";
export default {
  components: {
    LabelButton,
  },
  data() {
    return {
      rosseta: false,
      modeller: false,

      pregraftPromise: null,
    };
  },
  computed: {
    ...mapGetters([
      "getPregraftData",
      "getGraftingStarted",
      "getScaffold",
      "getInsert",
      "getToken",
    ]),
  },
  methods: {
    ...mapActions(["pregraft", "startGrafting"]),
    async startModelling() {
      await this.startGrafting({
        rosseta: true,
        modeller: true,
      });
      console.log("hello!");
      this.$router.push({
        name: "results-check",
        params: { jobId: this.getToken },
      });
    },

    downloadSolutionSequences() {
      var blob = new Blob([JSON.stringify(this.getPregraftData)], {
        type: "text/json;charset=utf-8",
      });
      saveAs(
        blob,
        `${this.getScaffold.name}_${this.getScaffold.chain}_${this.getInsert.name}_${this.getInsert.chain}_solution_sequences.json`
      );
    },
  },
};
</script>

<style scoped>
.license {
  align-self: flex-end;
  margin: 0px 20px;
}
a {
  color: var(--accent);
}
a:visited {
  color: var(--accent50);
}
.warning {
  color: var(--accent50);
}

.jobId {
  color: var(--insert);
}
.prompt {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.start {
  display: block;
  align-self: stretch;
  margin: 20px;
}
.presolution {
  margin: 40px;
}
.solution_number {
  color: var(--accent);
}
.licences {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
}
.download {
  width: fit-content;
}
</style>