<template>
  <q-page padding>
    <div class="row q-col-gutter-lg">
      <div class="col-xs-12 col-sm-12">
        <base-page-header
          :title="$t('subscription')"
          :hint="$t('hint.subscription')"
          no-tabs
        />
      </div>
      <div class="col-xs-12 col-sm-6">
        <plans-card
          :title="title"
          :disable="processing"
          :loading="isLoadingSubscription"
          v-model:mode="mode"
          v-model:interval="interval"
          v-model="price"
        />
      </div>
      <div class="col-xs-12 col-sm-6">
        <div class="q-gutter-y-lg">
          <payment-methods
            v-model="paymentMethod"
            pay-mode
            :title="$t('paymentMethods')"
            :user="user"
          />
          <manage-subscription
            v-if="processPayment"
            :price="price"
            :mode="mode"
            :payment-method="paymentMethod"
            @processing="onProcessing"
          />
        </div>
      </div>
    </div>
  </q-page>
</template>

<script>
import { mapActions, mapState } from "pinia";
import { useAppStore } from "stores/app";
import { useSubscriptionStore } from "stores/subscription";
import ManageSubscription from "components/subscription/ManageSubscription.vue";
import PaymentMethods from "components/payment-methods/PaymentMethods.vue";
import PlansCard from "src/components/subscription/PlansCard.vue";

export default {
  components: {
    PaymentMethods,
    ManageSubscription,
    PlansCard,
  },
  data() {
    return {
      mode: "create",
      interval: "month",
      price: null,
      paymentMethod: null,
      processing: false,
    };
  },
  methods: {
    ...mapActions(useSubscriptionStore, ["setUser"]),
    onProcessing(val) {
      console.func("pages/SubscriptionPage:methods.onProcessing()", arguments);
      this.processing = val;
    },
  },
  computed: {
    ...mapState(useAppStore, ["user"]),
    ...mapState(useSubscriptionStore, [
      "plans",
      "upcomingInvoice",
      "currentPlan",
      "defaultPaymentMethod",
      "defaultPlan",
      "isSubscribed",
      "isLoadingSubscription",
    ]),
    title() {
      return this.isSubscribed ? this.$t("changePlan") : this.$t("selectPlan");
    },
    processPayment() {
      if (!this.isSubscribed && this.price) {
        return true;
      }
      return this.currentPlan?.stripe_id != this.price?.stripe_id;
    },
  },
  async mounted() {
    await this.setUser(this.user);
    const { interval } = this.currentPlan || {};
    if (["month", "year"].includes(interval)) {
      this.interval = interval;
    }
    this.price = this.currentPlan?.id ? this.currentPlan : this.defaultPlan;
  },
  watch: {
    defaultPaymentMethod(value) {
      if (value?.id) {
        this.paymentMethod = { ...value };
      }
    },
    currentPlan(value) {
      this.price = value;
    },
    defaultPlan(value) {
      if (!this.price) {
        this.price = value;
      }
    },
  },
};
</script>
