import Step from "~/components/Step";
import Postcode from "~/components/inputs/Postcode";
import { mapState, mapActions } from "vuex";
import * as frMutations from "~/mutations/franchises";

export default {
  name: "BoxRental",
  data: function() {
    return {
      nextButtonIsActive: true,
      movingFrom: {
        label: "Moving from",
        required: true,
        valueName: "movingFrom",
        placeholder: "Current Zip/Postal Code",
        errorMessage: "",
        value: ""
      },
      movingTo: {
        label: "Moving to",
        required: true,
        valueName: "movingTo",
        placeholder: "New Zip/Postal Code",
        errorMessage: "",
        value: ""
      }
    };
  },
  components: {
    Step,
    Postcode
  },
  methods: {
    bindAction(data) {
      this[data.valueName].value = data.value;
    },
    async goNext() {
      if (!this.canContinue) {
        return;
      }
      this.nextButtonIsActive = false;

      await this.save();

      this.nextButtonIsActive = true;

      // this.movingTo.errorMessage === "" &&
      // this.movingFrom.errorMessage === ""
      //   ) {
      //     this.nextButtonIsActive = true;
      //     // this.$router.push("/box-rental/what");
      //   } else {
      //     this.nextButtonIsActive = true;
      //   }
      // })
      // .catch(() => {
      //   this.nextButtonIsActive = true;
      // });
    },
    async save() {
      await this.checkSecurityToken();

      try {
        this.setMovingFrom(this.movingFrom.value);
        // change store franchise id
        await this.updateLocalFranchiseByZip({
          zip: this.movingFrom.value,
          mutation: frMutations.SET_FRANCHISE_ID_FROM
        });
      } catch (e) {
        this.movingFrom.errorMessage = await e.message;
      }
      try {
        await this.changeAPIFranchise(this.stateFranchiseId);
      } catch (e) {}

      try {
        this.setMovingTo(this.movingTo.value);
        await this.updateLocalFranchiseByZip({
          zip: this.movingFrom.value,
          mutation: frMutations.SET_FRANCHISE_ID_TO
        });
      } catch (e) {
        this.movingTo.errorMessage = e.message;
      }
    },
    ...mapActions({
      setMoveType: "userInfo/setMoveType",
      setMovingFrom: "userInfo/setMovingFrom",
      setMovingTo: "userInfo/setMovingTo",
      updateLocalFranchiseByZip: "franchises/updateFranchiseByZip",
      changeAPIFranchise: "franchises/changeFranchise",
      checkSecurityToken: "service/checkSecurityToken"
    })
  },
  computed: {
    canContinue: function() {
      return (
        this.movingFrom.value !== "" &&
        this.movingTo.value !== "" &&
        this.nextButtonIsActive
      );
    },
    ...mapState({
      stateMovingFrom: state => state.userInfo.movingFrom,
      stateMovingTo: state => state.userInfo.movingTo,
      stateFranchiseId: state => state.franchises.franchiseIDFrom
    })
  },
  created: function() {
    this.movingFrom.value = this.stateMovingFrom;
    this.movingTo.value = this.stateMovingTo;
    this.setMoveType("BOX_RENTAL");
  }
};