<template>
  <div class="score-matrix">

    <div class="text-h5 mb-0">
      <span>Development Process</span>
      <dialog-info>
        <template v-slot:title>Development Process</template>
        <template v-slot:text>
          The progress bar shows the current status of your development process by highlighting concluded prototype milestones. These milestones are a roadmap to the product concept. Each
          milestone is required to be completed through at least one cycle (iterations of a milestone are possible and desirable).
        </template>
      </dialog-info>
    </div>

    <v-container class="my-0">
      <v-skeleton-loader v-if="!getPhases" type="image" max-height="150"></v-skeleton-loader>
      <v-stepper v-else v-model="progress.e1" alt-labels non-linear class="elevation-0 py-7 px-7">
        <v-stepper-header class="elevation-0">
          <v-stepper-step :complete="getPhases.includes('Problem Understanding')" step="" complete-icon="" color="accent">
            <div class="text-center body-2 pl-8" v-show="textVisible">Problem<br>Pretotype</div>
            <div class="text-center body-2" v-show="textVisible" style="margin:-110px 0;">
              <span>Problem</span>
              <dialog-info styles="margin: -3px; padding: 0 0 0 0;">
                <template v-slot:title>Problem Understanding</template>
                <template v-slot:text>
                  In this phase, you gain a deep understanding of the problem you're addressing. It involves research, observation, interviews, and testing to identify the core issues. 
                  The result is a problem pretotype that describes the overall problem that you are tackling.
                </template>
              </dialog-info>
              <span>Understanding</span>
            </div>
          </v-stepper-step>

          <v-divider :class="getPhases.includes('Problem Understanding') && getPhases.includes('Problem Decomposition') && 'active'"></v-divider>

          <v-stepper-step :complete="getPhases.includes('Problem Decomposition')" step="" complete-icon="" color="accent">
            <div class="text-center body-2 ml-9" v-show="textVisible">Problem<br>Prototype</div>
            <div class="text-center body-2" v-show="textVisible" style="margin:-110px 0;">
              <span>Problem</span>
              <dialog-info styles="margin: -3px; padding: 0 0 0 0;">
                <template v-slot:title>Problem Decomposition</template>
                <template v-slot:text>
                Once the problem is understood, it's broken down into sub-problems. This phase helps define the specific challenges that can be solved through targeted user feedback. 
                The result is a problem prototype that shows the final set of problems that can be solved through targeted user feedback.
                </template>
              </dialog-info>
              <span>Decomposition</span>
            </div>
          </v-stepper-step>

          <v-divider :class="getPhases.includes('Problem Decomposition') && getPhases.includes('Requirements Elicitation') && 'active'"></v-divider>

          <v-stepper-step :complete="getPhases.includes('Requirements Elicitation')" step="" complete-icon="" color="accent">
            <div class="text-center body-2 ml-8" v-show="textVisible">Solution<br>Pretotype I</div>
            <div class="text-center body-2" v-show="textVisible" style="margin:-110px 0;">
              <span>Requirements</span>
              <dialog-info styles="margin: -3px; padding: 0 0 0 0;">
                <template v-slot:title>Requirements Elicitation</template>
                <template v-slot:text>
                Collecting requirements for the sub-problems is essential. Interviews, questionnaires, user observations, workshops, and prototyping with users are all part of this phase. 
                The result of this phase is a solution pretotype 1 that are artifacts created to test if the requirement or alternative requirements are useful.
                </template>
              </dialog-info>
              <span>Elicitation</span>
            </div>
          </v-stepper-step>

          <v-divider :class="getPhases.includes('Requirements Elicitation') && getPhases.includes('Requirements Selection') && 'active'"></v-divider>

          <v-stepper-step :complete="getPhases.includes('Requirements Selection')" step="" complete-icon="" color="accent">
            <div class="text-center body-2 ml-8" v-show="textVisible">Solution<br>Pretotype II</div>
            <div class="text-center body-2" v-show="textVisible" style="margin:-110px 0;">
              <span>Requirements</span>
              <dialog-info styles="margin: -3px; padding: 0 0 0 0;">
                <template v-slot:title>Requirements Selection</template>
                <template v-slot:text>
                After gathering requirements, it's time to select the final ones. The selected requirements are tested through initial solution prototypes. 
                The result of this phase is a solution pretotype 2, which are artifacts created to test the requirements to be selected, and a problem definition/requirements list that describes the problem you defined in steps 1-2.
                </template>
              </dialog-info>
              <span>Selection</span>
            </div>
          </v-stepper-step>

          <v-divider :class="getPhases.includes('Requirements Selection') && getPhases.includes('Function Exploration') && 'active'"></v-divider>

          <v-stepper-step :complete="getPhases.includes('Function Exploration')" step="" complete-icon="" color="accent">
            <div class="text-center body-2 ml-8" v-show="textVisible">Solution<br>Prototype I</div>
            <div class="text-center body-2" v-show="textVisible" style="margin:-110px 0;">
              <span>Function</span>
              <dialog-info styles="margin: -3px; padding: 0 0 0 0;">
                <template v-slot:title>Function Exploration</template>
                <template v-slot:text>
                  This phase involves brainstorming and thinking of different functions that can address the requirements. 
                  The result of such a phase is a solution prototype 1 focusing on the functionality of the desired product (works-like).
                </template>
              </dialog-info>
              <span>Exploration</span>
            </div>
          </v-stepper-step>

          <v-divider :class="getPhases.includes('Function Exploration') && getPhases.includes('Embodiment Design') && 'active'"></v-divider>

          <v-stepper-step :complete="getPhases.includes('Embodiment Design')" step="" complete-icon="" color="accent">
            <div class="text-center body-2 ml-8" v-show="textVisible">Solution<br>Prototype II</div>
            <div class="text-center body-2" v-show="textVisible" style="margin:-110px 0;">
              <span>Embodiment</span>
              <dialog-info styles="margin: -3px; padding: 0 0 0 0;">
                <template v-slot:title>Embodiment Design</template>
                <template v-slot:text>
                  Here, you determine how to realize the functions identified in the previous phase. 
                  The result of such a phase is a solution prototype 2 focusing on the looks of the desired product (looks-like).
                </template>
              </dialog-info>
              <span>Design</span>
            </div>
          </v-stepper-step>

          <v-divider :class="getPhases.includes('Embodiment Design') && getPhases.includes('Integration Design') && 'active'"></v-divider>

          <v-stepper-step :complete="getPhases.includes('Integration Design')" step="" complete-icon="" color="accent">
            <div class="text-center body-2 ml-8" v-show="textVisible">Integration<br>Prototype</div>
            <div class="text-center body-2" v-show="textVisible" style="margin:-110px 0;">
              <span>Integration</span>
              <dialog-info styles="margin: -3px; padding: 0 0 0 0;">
                <template v-slot:title>Integration Design</template>
                <template v-slot:text>
                Integration of all technical components into a cohesive design takes place in this phase, resulting in an integration prototype. 
                The result is an integration prototype by combining the functional- and model prototypes.
                </template>
              </dialog-info>
              <span class="mx-2">Design</span>
            </div>
          </v-stepper-step>

          <v-divider :class="getPhases.includes('Integration Design') && getPhases.includes('User Testing and Feedback') && 'active'"></v-divider>

          <v-stepper-step :complete="
                 getPhases.includes('Problem Understanding')
              && getPhases.includes('Problem Decomposition')
              && getPhases.includes('Requirements Elicitation')
              && getPhases.includes('Requirements Selection')
              && getPhases.includes('Function Exploration')
              && getPhases.includes('Embodiment Design')
              && getPhases.includes('Integration Design')
              && getPhases.includes('User Testing and Feedback')" step="" color="accent" complete-icon="">
            <div class="text-center body-2 ml-8" v-show="textVisible">Final<br>Prototype</div>
            <div class="text-center body-2" v-show="textVisible" style="margin:-110px 0;">
              <span>User Testing &</span>
              <dialog-info styles="margin: -3px; padding: 0 0 0 0;">
                <template v-slot:title>User Testing & Feedback</template>
                <template v-slot:text>
                  The final prototype is tested with users to validate the solution and demonstrate a working version of the product concept. 
                  This phase culminates in a Final Prototype that is a a working version of the product concept and shows by user feedback that the problem was adequately solved and convincing to invest in the product.
                </template>
              </dialog-info>
              <span>Feedback</span>
            </div>
          </v-stepper-step>
        </v-stepper-header>
      </v-stepper>
    </v-container>

  </div>
</template>

<script>
import DialogInfo from "@/components/DialogInfo";
import {mapGetters} from "vuex";

export default {
  name: "PrototypeProcess",
  components: {DialogInfo},
  data: () => ({
    milestones: [],
    progress: {
      loading: false,
      e1: 7
    },
  }),
  methods: {},
  computed: {
    ...mapGetters('site', ['getPhases']),
    textVisible() {
      return this.$vuetify.breakpoint.lgAndUp
    }
  },
  created() {
    if (this.getPhases === null) {
      this.$store.dispatch('site/fetchProgress')
    }
  },
}
</script>

<style scoped lang="scss">
// background color for header icons in App.vue

.v-stepper--alt-labels .v-stepper__header .v-divider {
  // margins left and right from v-divider
  margin: 35px -77px 0px;
  border-width: thick 0 0 0;
}

.theme--light.v-stepper .v-stepper__header .v-divider {
  background-color: #a0a2a2;
}

.v-stepper {
  .v-stepper__header {
    // overall width of container (negative
    margin: -10px -55px;
  }

  .active {
    // assign this class to connect steps with black divider
    background-color: #01141C !important;
  }

}
</style>