<script>
import Datepicker from "vuejs-datepicker";
import { sumBy, find, forEach, isEmpty } from "lodash-es";
import humps from "humps";
import restaurantPackageMixin from "lib/restaurantPackageMixin";
import accounting from "accounting";
import CancelComponent from "./CancelComponent.vue";
import { getJSON, patchJSON, postJSON } from "lib/myAjax";

const $ = window.$;

export default {
  mixins: [restaurantPackageMixin],
  template: "#reservations-form",
  components: {
    Datepicker
  },
  data() {
    return {
      ui: {
        showTableField: false,
        showSpecialRequestField: false
      },
      reservation: {}
    };
  },
  watch: {
    // eslint-disable-next-line
    "reservation.state": function(newVal, _) {
      switch (newVal) {
        case "pending":
          this.$set(this.$data.reservation, "arrived", false);
          this.$set(this.$data.reservation, "active", true);
          this.$set(this.$data.reservation, "noShow", false);
          break;
        case "arrive":
          this.$set(this.$data.reservation, "arrived", true);
          this.$set(this.$data.reservation, "active", true);
          this.$set(this.$data.reservation, "noShow", false);
          break;
        case "cancel":
          this.$set(this.$data.reservation, "arrived", false);
          this.$set(this.$data.reservation, "active", false);
          this.$set(this.$data.reservation, "noShow", false);
          break;
        case "no_show":
          this.$set(this.$data.reservation, "arrived", false);
          this.$set(this.$data.reservation, "active", true);
          this.$set(this.$data.reservation, "noShow", true);
          break;
        default:
          window.alert("unknown reservation status");
      }
    }
  },
  computed: {
    basePrice() {
      const { selectedPackages } = this.$data;
      let pack;
      if (selectedPackages.length === 0) {
        return "";
      }

      let basePriceInt = 0;
      let currency = "";
      forEach(selectedPackages, selectedPack => {
        pack = find(this.$data.allPackages, p => p.id === selectedPack.id);
        if (!pack) {
          return "";
        }
        if (pack.useCustomPrice) {
          basePriceInt += pack.customPriceCents / 100;
          currency = pack.customPriceCurrency;
        } else {
          if (pack.pricingMode === "multiple") {
            const { adult } = this.$data.reservation;
            const pricing = find(pack.pricing, p => {
              return adult >= p.minSeat && adult <= p.maxSeat;
            });
            if (pricing) {
              basePriceInt += pricing.priceInt;
              currency = pricing.currencySymbol;
            }
          } else {
            basePriceInt += pack.pricing.priceInt;
            currency = pack.pricing.currencySymbol;
          }
        }
      });
      return this.formatMoney(basePriceInt, currency);
    },
    totalPacks() {
      return sumBy(this.$data.selectedPackages, p => p.quantity);
    },
    totalPrice() {
      let total = 0;
      let currency = null;
      const { adult, kids } = this.$data.reservation;

      forEach(this.$data.selectedPackages, selectedPack => {
        const pack = find(
          this.$data.allPackages,
          p => p.id === selectedPack.id
        );
        if (!pack) {
          return "";
        }

        if (pack.useCustomPrice) {
          total += pack.customPriceCents / 100;
          currency = pack.customPriceCurrency;
        } else {
          if (pack.pricingMode === "multiple") {
            const price = find(pack.pricing, p => {
              return adult >= p.minSeat && adult <= p.maxSeat;
            });
            if (price) {
              total = adult * price.priceInt + (kids * price.priceInt) / 2;
              currency = price.currencySymbol;
            }
          } else {
            total += selectedPack.quantity * pack.pricing.priceInt;
            currency = pack.pricing.currencySymbol;
          }
        }
      });

      if (total === 0 || currency === null) {
        return "";
      }
      return this.formatMoney(total, currency);
    }
  },
  mounted() {
    const data = humps.camelizeKeys(window.data);
    const { reservation } = data;
    this.$set(this.$data, "reservation", reservation);
    if (reservation.table) {
      this.$set(this.$data.ui, "showTableField", true);
    }
    if (reservation.specialRequest) {
      this.$set(this.$data.ui, "showSpecialRequestField", true);
    }
    this.$set(this.$data, "allPackages", data.allPackages);
    const hasPackages = reservation.selectedPackages.length > 0;
    if (hasPackages) {
      this.chooseSelectedPackage(reservation.selectedPackages, false);
      if (window.data.customPackagePricing) {
        this.applyCustomPackagePricing(window.data.customPackagePricing);
      }
    }
  },
  methods: {
    checkInventoryStatus(onSuccess, onError) {
      const url = `/admin/restaurants/923/check_inventory_status.json`;
      const payload = {
        date: this.$data.reservation.date,
        startTime: this.$data.reservation.startTime,
        adult: this.$data.reservation.adult,
        kids: this.$data.reservation.kids
      };
      postJSON(
        url,
        { reservation: humps.decamelizeKeys(payload) },
        response => {
          if (response.available) {
            onSuccess();
          } else {
            const message = `restaurant says: ${response.message}`;
            const ask = confirm(message);
            if (ask === true) {
              console.log("confirm true");
              onSuccess();
            }
          }
        },
        error => {
          onError()
        }
      );
    },
    submitForm() {
      if (this.$data.selectedPackages.length < 1) {
        window.alert("Please select package");
        return false;
      }
      if (
        this.$data.reservation.state === "cancel" &&
        isEmpty(this.$data.reservation.cancelReason)
      ) {
        this.showCancelReasonModal();
        return false;
      }

      const onSuccess = () => {
        this.$refs.mainForm.submit();
      }
      const onError = () => {
        window.alert("Something went wrong");
      }
      this.checkInventoryStatus(
        onSuccess,
        onError
      );

    },
    showCancelReasonModal() {
      this.$modal.show(
        CancelComponent,
        {
          onSubmit: () => this.submitForm(),
          onReasonChange: reason =>
            this.$set(this.$data.reservation, "cancelReason", reason)
        },
        {
          height: "auto"
        }
      );
    },
    cancelForm() {
      window.location = window.links.reservationDashboardPath;
    },
    formatMoney(price, currency) {
      return accounting.formatMoney(price, currency, 0, ",", ".", "%v%s");
    }
  }
};
</script>