<template>
  <div class="workspace">
    <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>
      <SolutionDiagram/>
      <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"]),
  },

  mounted() {},
  created() {
    this.setToken({token: this.$route.params.jobId});

    this.checkSolutionState();
    this.statePolling = setInterval(() => this.checkSolutionState(), 60 * 1000);
  },
  beforeDestroy() {
    clearInterval(this.statePolling);
  },

  watch: {
    getToken: {
      immediate: true,

      handler(newValue, oldValue) {
        console.log("getToken", newValue)
        this.checkSolutionState();
      }
    }
  },
};
</script>

<style>
.progressbar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  margin-bottom: 16px;
}
.step-divider {
  height: 16px;
  width: 40px;
  background: #d9d9d9;
}
.message {
  text-align: center;
}

a {
  color: var(--accent);
}
</style>