<template>
  <div class="inline" v-if="shouldDisplayProTag">
    <div class="bg-nt-blue text-white px-2 text-xs uppercase inline rounded-full font-semibold cursor-pointer"
         @click.prevent="showPremiumModal=true"
    >
      PRO
    </div>
    <modal :show="showPremiumModal" @close="showPremiumModal=false">
      <h2 class="text-nt-blue">
        OpnForm PRO
      </h2>
      <h4 v-if="user && user.is_subscribed" class="text-center mt-5">
        We're happy to have you as a Pro customer. If you're having any issue with OpnForm, or if you have a
        feature request, please <a href="mailto:contact@opnform.com">contact us</a>.
      </h4>
      <div v-if="!user || !user.is_subscribed" class="mt-4">
        <p>
          All the features with a<span
          class="bg-nt-blue text-white px-2 text-xs uppercase inline rounded-full font-semibold mx-1"
        >
          PRO
        </span> tag are available in the Pro plan of OpnForm. <b>You can play around and try all Pro features
          within
          the form editor, but you can't use them in your real forms</b>. You can subscribe now to gain unlimited access
          to
          all our pro features!
        </p>
      </div>

      <div class="my-4 text-center">
        <v-button color="white" @click="showPremiumModal=false">
          Close
        </v-button>
      </div>
    </modal>
  </div>
</template>

<script>
import { computed } from 'vue'
import Modal from './Modal.vue'
import { useAuthStore } from '../../stores/auth';
import { useWorkspacesStore } from '../../stores/workspaces';
import PricingTable from "../pages/pricing/PricingTable.vue";

export default {
  name: 'ProTag',
  components: {PricingTable, Modal},
  props: {},

  setup () {
    const authStore = useAuthStore()
    const workspacesStore = useWorkspacesStore()
    return {
      user : computed(() => authStore.user),
      currentWorkSpace : computed(() => workspacesStore.getCurrent())
    }
  },

  data() {
    return {
      showPremiumModal: false,
      checkoutLoading: false
    }
  },

  computed: {
    shouldDisplayProTag() {
      if (!this.$config.paid_plans_enabled) return false
      if (!this.user || !this.currentWorkSpace) return true
      return !(this.currentWorkSpace.is_pro)
    },
  },

  mounted() {
  },

  methods: {
    openChat() {
      window.$crisp.push(['do', 'chat:show'])
      window.$crisp.push(['do', 'chat:open'])
    },
  }
}
</script>
