<template>
  <div>
    <Row>
      <Col
        :span="isUsePopup ? 22 : 10"
        :offset="isUsePopup ? 1 : 7"
      >
        <Card
          dis-hover
          :padding="isUsePopup ? 12 : 16"
        >
          <div
            class="text-center"
            :class="{
              'upgrade-plan--popup': isUsePopup,
            }"
          >
            <h2 :class="isUsePopup ? 'mb-5' : 'mb-10'">{{ titleText }}</h2>
            <p :class="isUsePopup ? 'mb-10' : 'mb-20'">{{ descriptionText }}</p>
            <div :class="['upgrade-plan__info', isUsePopup ? 'mb-10' : 'mb-20']">
              <Tag color="blue">{{ getUsername }}</Tag>
              <Tag color="red">{{ requirePlan }}</Tag>
              <Tag color="gold">{{ durationText }}</Tag>
              <Tag color="green">{{ expiredAtText }}</Tag>
            </div>
            <img
              :src="qrImageUrl"
              :alt="$t('UPGRADE_PLAN_QR_ALT')"
              :class="['upgrade-plan__qr', isUsePopup ? 'mb-10' : 'mb-20']"
            >
            <div class="upgrade-plan__actions">
              <Button
                type="error"
                :long="!isUsePopup"
                @click="openPayment"
              >
                {{ buttonText }}
              </Button>
              <Button
                :class="isUsePopup ? '' : 'mt-10'"
                :long="!isUsePopup"
                @click="openPromotionPayment"
              >
                {{ promotionButtonText }}
              </Button>
            </div>
          </div>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import queryString from 'query-string';
import moment from 'moment';
import { getPaymentUrl, priceMonth } from '@/config/pricing';

export default {
  name: 'UpgradePlan',
  computed: {
    featureName() {
      if (this.$route.query.feature) {
        return this.$route.query.feature;
      }

      return this.$t('FEATURE_NAME_DEFAULT');
    },
    requirePlan() {
      if (this.$route.query.plan) {
        return this.$route.query.plan;
      }

      return 'Vip';
    },
    titleText() {
      return this.$t('FEATURE_REQUIRE_PAID_PLAN', {
        name: this.featureName,
      });
    },
    descriptionText() {
      return this.$t('ALERT_REQUIRED_PLAN_VIP', {
        price: priceMonth,
      });
    },
    durationText() {
      return this.$t('UPGRADE_PLAN_DURATION_VALUE', {
        day: 30,
      });
    },
    expiredAtText() {
      return moment().add(30, 'days').format('DD/MM/YYYY');
    },
    buttonText() {
      return this.$t('FEATURE_REQUIRE_PAID_PLAN_UPGRADE_BTN', {
        price: priceMonth,
      });
    },
    promotionButtonText() {
      return this.$t('UPGRADE_PLAN_PROMOTION_BTN');
    },
    qrImageUrl() {
      return queryString.stringifyUrl({
        url: 'https://img.vietqr.io/image/970436-1063675203-compact2.jpg',
        query: {
          accountName: 'Công ty cổ phần tập đoàn MediaSoft',
          addInfo: `${this.getUsername} ExtensionVip`,
          amount: 120000,
        },
      });
    },
  },
  methods: {
    openPayment() {
      const url = getPaymentUrl(this.getUsername, 'extension-vip');
      this.openExternalUrl(url);
    },
    openPromotionPayment() {
      const url = getPaymentUrl(this.getUsername, 'a5d');
      this.openExternalUrl(url);
    },
  },
};
</script>

<style lang="scss" scoped>
  .upgrade-plan--popup {
    font-size: 12px;
  }

  .upgrade-plan__info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .upgrade-plan__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .upgrade-plan__qr {
    width: 100%;
    max-width: 320px;
    border-radius: 12px;
  }

  .upgrade-plan--popup .upgrade-plan__qr {
    max-width: 220px;
  }
</style>
