<template>
  <div class="prompt" v-if="!getPregraftData">
    <LabelButton example-act="graft-start" class="start" @click="pregraft">
      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
    >

    <div example-act="confirm-licenses" class="licences">
      <div class="license">
        I am an owner of a
        <a href="https://salilab.org/modeller/" target="_blank">MODELLER</a>
        license:
        <input id="modeller-licence" type="checkbox" v-model="modeller" />
      </div>
      <div class="license">
        I am an owner of a
        <a href="https://www.rosettacommons.org/software" target="_blank">
          Rosseta Software Suite</a
        >
        license:
        <input id="rosseta-licence" type="checkbox" v-model="rosseta" />
      </div>
    </div>
    <p v-if="!getGraftingStarted">
      <LabelButton
        example-act="graft-final"
        v-show="modeller && rosseta"
        @click="startGrafting({ rosseta, modeller })"
        class="download"
      >
        Start modelling</LabelButton
      >
    </p>
    <p example-act="grafting-link" v-else>
      Your job was submitted, please note down your job ID (<span class="jobId">{{ this.getToken }}</span>)
      and check on it later via Grafting Results in the horizontal menu. You may
      also bookmark
      <router-link
        :to="{ name: 'results-check', params: { jobId: this.getToken } }"
        >this link</router-link
      >.<br />
    </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,
    };
  },
  computed: {
    ...mapGetters([
      "getPregraftData",
      "getGraftingStarted",
      "getScaffold",
      "getInsert",
      "getToken"
    ]),
  },
  methods: {
    ...mapActions(["pregraft", "startGrafting"]),

    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>