<template>
  <div class="workspace">
    <p example-act="grafting-link">
      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
      >.
    </p>

  <template v-if="getSolutionState != null">
    <div class="diagram_container">
      <SolutionDiagram />
    </div>
  </template>

     <template v-if="getSolutionState != null">
       <!--
      <div class="progressbar">
        <SolutionStep step_name="Queued" step_id="QUEUED" order="0" />
        <div class="step-divider"></div>
        <SolutionStep
          step_name="Preparation"
          step_id="PREPARING_ALIGNMENTS"
          order="1"
        />
        <div class="step-divider"></div>
        <SolutionStep step_name="Modelling" step_id="MODELLING" order="3" />
        <div class="step-divider"></div>
        <SolutionStep step_name="Relaxing" step_id="RELAXING" order="5" />
        <div class="step-divider"></div>
        <SolutionStep
          step_name="Finalizing"
          step_id="PROCESSING_RESULTS"
          order="7"
        />
        <div class="step-divider"></div>
        <SolutionStep step_name="Finished" step_id="FINISHED" final="true" />
      </div> -->
      <div class="message" v-if="getSolutionState.error">
        Grafting failed with error: {{ getSolutionState.id }}.
      </div>
      <div class="message" v-if="getSolutionState.canBeRetrieved">
        Grafting is finished, click
        <router-link :to="{ name: 'results-view', params: { jobId: getToken } }"
          >here</router-link
        >
        to retrive the results.
      </div>
    </template> 
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { mapGetters } from "vuex";
import SolutionStep from "../components/SolutionProgress/SolutionStep";
import SolutionDiagram from "../components/SolutionProgress/SolutionDiagram";

export default {
  components: {
    SolutionStep,
    SolutionDiagram,
  },
  data() {
    return {
      statePolling: null,
    };
  },
  methods: {
    ...mapActions(["checkSolutionState", "setToken"]),
  },

  computed: {
    ...mapGetters(["getSolutionState", "getToken"]),
  },

  beforeDestroy() {
    clearInterval(this.statePolling);
  },

  watch: {
    getToken: {
      immediate: true,

      handler(newValue, oldValue) {
        this.setToken({ token: this.$route.params.jobId });

        this.checkSolutionState();
        this.statePolling = setInterval(
          () => this.checkSolutionState(),
          60 * 1000
        );
      },
    },
  },
};
</script>

<style>
.progressbar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  margin-bottom: 16px;
}

.diagram_container {
  text-align:center;
}

.step-divider {
  height: 16px;
  width: 40px;
  background: #d9d9d9;
}
.message {
  text-align: center;
}

a {
  color: var(--accent);
}

.jobId {
  color: var(--insert);
}
</style>