<template>
  <div class="dashboard-panel-element" v-can:view="'my-bundle'">
    <b-row class="border-bottom pb-1 mb-2">
      <b-col cols="auto">
        <b-button
          variant="link"
          :to="{ name: 'MyBundle' }"
          data-qa="myBundle-bundleDetails-backToBundleList-btn"
          class="d-flex align-items-center text-decoration-none px-1"
        >
          <icon name="back-arrow" class="mr-2" />
          <span class="font-size-5">
            <span class="d-md-none">{{ $t('Common.Back') }}</span>
            <span class="d-none d-md-inline">{{ $t('MyBundle.Details.Button.BackToBundleList') }}</span>
          </span>
        </b-button>
      </b-col>
      <b-col class="text-right">
        <bundle-details-actions-dropdown
          v-if="bundleDetails.bundle_id"
          class="d-none d-md-inline-block"
          @viewAnalytic="openAnalyticModal"
          :bundle-id="bundleDetails.bundle_id"
          data-qa-prefix="myBundle-bundleDetails"
        />
        <native-share-button
          v-if="bundleDetails.bundle_details_link"
          class="ml-3"
          :native-share="false"
          :link="bundleDetails.bundle_details_link"
          :title="$t('MyBundle.Listing.ShareBundle.title')"
          :text="`${$t('MyBundle.Listing.ShareBundle.title')}: ${bundleDetails.bundle_name}`"
          data-qa-prefix="myBundle-bundleDetails"
        />
      </b-col>
    </b-row>

    <b-row v-if="bundleDetails.hasOwnProperty('bundle_id')" class="d-md-none">
      <b-col class="text-right">
        <bundle-details-actions-dropdown
          :bundle-id="bundleDetails.bundle_id"
          data-qa-prefix="myBundle-bundleDetails-mobile"
        />
      </b-col>
    </b-row>

    <b-overlay
      :show="isLoading('loadingBundleDetails')"
      variant="white"
      :class="{ 'vh-50': isLoading('loadingBundleDetails') }"
    >
      <template v-slot:overlay>
        <b-spinner class="mx-2 text-primary" />
        <strong class="h4">{{ $t('Common.Loading') }}</strong>
      </template>

      <div v-if="bundleDetails.hasOwnProperty('bundle_id')" class="col">
        <b-row>
          <b-col xl="8" class="mb-1">
            <bundle-info-form
              read-only
              class="mt-md-3"
              :value="getBundleInfo"
              :bundle-price-options="bundleConfig.priceTypes"
              :bundle-items="bundleDetails.bundle_items || []"
              :bundle-prices="bundleDetails.bundle_total || {}"
              :currency="bundleDetails.bundle_currency_code || ''"
              :bundle-checkout-enrolment-types="bundleConfig.enrolmentTypes"
              data-qa-prefix="myBundle-bundleDetails"
            />
          </b-col>
          <b-col xl="4" class="border-top border-xl-left border-xl-top-0 mt-3 pb-5">
            <bundle-image-display class="mt-3 mt-xl-0" :image-src="bundleDetails.bundle_image" />
          </b-col>
        </b-row>
      </div>
    </b-overlay>

    <bundle-analysis-modal ref="bundle-analytic" />
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import MyBundleCommonMixin from '@/app/my-bundle/mixins/myBundleCommonMixin'
import NativeShareButton from '@/app/_global/components/elements/NativeShareButton'
import BundleInfoForm from '@/app/my-bundle/_global/components/blocks/BundleInfoForm'
import BundleImageDisplay from '@/app/my-bundle/_global/components/blocks/BundleImageDisplay'
import BundleAnalysisModal from '@/app/my-bundle/_global/components/blocks/BundleAnalyticModal'
import BundleDetailsActionsDropdown from '@/app/my-bundle/bundle-details/components/elements/BundleDetailsActionsDropdown'

export default {
  name: 'BundleDetails',
  mixins: [MyBundleCommonMixin],
  components: {
    BundleAnalysisModal,
    BundleImageDisplay,
    BundleInfoForm,
    BundleDetailsActionsDropdown,
    NativeShareButton,
  },
  props: {
    bundleId: { type: [Number, String], required: true },
  },
  data() {
    return {
      bundleDetails: {},
    }
  },
  computed: {
    ...mapGetters(['isLoading']),
    getBundleInfo() {
      let { bundle_name, bundle_description, bundle_configs } = this.bundleDetails
      return {
        bundleName: bundle_name,
        bundleDescription: bundle_description,
        useMemberPrice: this.hasConfig('bundle_member_price', bundle_configs),
        useRetailPrice: this.hasConfig('bundle_retail_price', bundle_configs),
        bundleEnrolmentType: this.getBundleCheckoutEnrolmentKey(bundle_configs) || null,
      }
    },
  },
  async mounted() {
    await this.loadBundleConfig()
    await this.loadBundleDetails(this.bundleId).then(result => {
      this.bundleDetails = result || {}
      this.setBundleCountry(result && result.bundle_country_id)
    })
  },
  methods: {
    ...mapActions('myBundle', ['loadBundleDetails', 'setBundleCountry']),
    openAnalyticModal() {
      this.$refs['bundle-analytic'].show(this.bundleDetails)
    },
  },
}
</script>
