<template>
  <ol class="breadcrumb">
    <li
      v-for="s in steps"
      :key="s"
      class="breadcrumb-item"
      :class="{ active: step === s }"
    >
      {{ $t("household_members_editor.app.steps." + s) }}
    </li>
  </ol>
  <concerned v-if="step === 'concerned'" />
  <household v-if="step === 'household'" @ready-to-go="goToNext" />
  <household-address v-if="step === 'household_address'" />
  <positioning v-if="step === 'positioning'" />
  <dates v-if="step === 'confirm'" />
  <confirmation v-if="step === 'confirm'" />

  <ul class="record_actions sticky-form-buttons">
    <li class="cancel" v-if="step !== 'concerned'">
      <button class="btn btn-cancel" @click="goToPrevious">
        {{ $t("household_members_editor.app.previous") }}
      </button>
    </li>
    <li class="cancel" v-else-if="hasReturnPath">
      <button class="btn btn-cancel" @click="goToPrevious">
        {{ $t("household_members_editor.app.cancel") }}
      </button>
    </li>
    <li v-if="step !== 'confirm'">
      <button
        class="btn btn-action"
        @click="goToNext"
        :disabled="!isNextAllowed"
      >
        {{ $t("household_members_editor.app.next") }}&nbsp;<i
          class="fa fa-arrow-right"
        />
      </button>
    </li>
    <li v-else>
      <button
        class="btn btn-save"
        @click="confirm"
        :disabled="hasWarnings || !lastStepIsSaveAllowed"
      >
        {{ $t("household_members_editor.app.save") }}
      </button>
    </li>
  </ul>
</template>

<script>
import { mapState } from "vuex";
import Concerned from "./components/Concerned.vue";
import Household from "./components/Household.vue";
import HouseholdAddress from "./components/HouseholdAddress";
import Dates from "./components/Dates.vue";
import Confirmation from "./components/Confirmation.vue";
import Positioning from "./components/Positioning";

export default {
  name: "App",
  components: {
    Positioning,
    Concerned,
    Household,
    HouseholdAddress,
    Dates,
    Confirmation,
  },
  data() {
    return {
      step: "concerned",
    };
  },
  computed: {
    ...mapState({
      hasWarnings: (state) =>
        state.warnings.length > 0 || state.errors.length > 0,
    }),
    steps() {
      let s = ["concerned", "household"];

      if (this.$store.getters.isHouseholdNew) {
        s.push("household_address");
      }

      if (!this.$store.getters.isModeLeave) {
        s.push("positioning");
      }

      s.push("confirm");

      return s;
    },
    hasReturnPath() {
      let params = new URLSearchParams(window.location.search);

      return params.has("returnPath");
    },
    // return true if the next step is allowed
    isNextAllowed() {
      switch (this.$data.step) {
        case "concerned":
          return this.$store.state.concerned.length > 0;
        case "household":
          return this.$store.state.mode !== null;
        case "household_address":
          return (
            this.$store.getters.hasHouseholdAddress ||
            this.$store.getters.isHouseholdForceNoAddress
          );
        case "positioning":
          return (
            this.$store.getters.hasHouseholdOrLeave &&
            this.$store.getters.hasPersonsWellPositionnated
          );
      }

      return false;
    },
    lastStepIsSaveAllowed() {
      let r =
        !this.$store.getters.isHouseholdNew ||
        (this.$store.state.numberOfChildren !== null &&
          this.$store.state.householdCompositionType !== null);
      console.log("is saved allowed ?", r);

      return r;
    },
  },
  methods: {
    goToNext() {
      console.log("go to next");
      switch (this.$data.step) {
        case "concerned":
          this.$data.step = "household";
          break;
        case "household":
          if (this.$store.getters.isHouseholdNew) {
            this.$data.step = "household_address";
            break;
          } else if (this.$store.getters.isModeLeave) {
            this.$data.step = "confirm";
            break;
          } else {
            this.$data.step = "positioning";
            break;
          }
        case "household_address":
          this.$data.step = "positioning";
          break;
        case "positioning":
          this.$data.step = "confirm";
          break;
      }
    },
    goToPrevious() {
      if (this.$data.step === "concerned") {
        let params = new URLSearchParams(window.location.search);
        if (params.has("returnPath")) {
          window.location.replace(params.get("returnPath"));
        } else {
          return;
        }
      }

      let s = this.steps;
      let index = s.indexOf(this.$data.step);
      if (s[index - 1] === undefined) {
        throw Error("step not found");
      }

      this.$data.step = s[index - 1];
    },
    confirm() {
      this.$store.dispatch("confirm");
    },
  },
};
</script>
