<template>
  <div class="dashboard-panel-element px-0" v-can:view="'my-bundle'">
    <div class="my-3">
      <b-col>
        <b-button
          variant="primary"
          class="lifted px-3"
          :to="{ name: 'MyBundleProcessStart' }"
          data-qa="myBundle-bundleListing-createBundle-btn"
        >
          {{ $t('MyBundle.Listing.Button.CreateBundle') }}
        </b-button>
      </b-col>
    </div>

    <div>
      <b-col>
        <b-table
          hover
          bordered
          show-empty
          stacked="lg"
          :items="getBundleList"
          :fields="bundleFields"
          :busy="isLoading('loadingBundleList')"
        >
          <template v-slot:empty>
            <h5 class="text-center mt-3">{{ $t('MyBundle.Listing.NoBundleFound') }}</h5>
          </template>

          <template v-slot:table-busy>
            <div class="text-center text-primary my-2">
              <b-spinner class="mx-2" />
              <strong class="h4">{{ $t('Common.Loading') }}</strong>
            </div>
          </template>

          <template v-slot:cell(index)="row">
            {{ row.index + 1 }}
          </template>

          <template v-slot:cell(bundle_total)="row">
            <span>{{ row.item.translated_bundle_currency_code || row.item.bundle_currency_code }} </span>
            <span>{{ row.value.member_price || '-' }}</span>
          </template>

          <template v-slot:cell(bundle_details_link)="row">
            <native-share-button
              v-if="row.value"
              block
              :link="row.value"
              :native-share="false"
              :title="$t('MyBundle.Listing.ShareBundle.title')"
              :text="`${$t('MyBundle.Listing.ShareBundle.title')}: ${row.item.bundle_name}`"
              :data-qa-prefix="`myBundle-bundleListing-idx${row.index}`"
            />
            <span v-else class="text-danger">{{ $t('MyBundle.Listing.Error.BrokenLink') }}</span>
          </template>

          <template v-slot:cell(more_details)="row">
            <b-button
              variant="link"
              :to="{ name: 'MyBundleDetails', params: { bundleId: row.item.bundle_id } }"
              :data-qa="`myBundle-bundleListing-bundle${row.item.bundle_id}-details-btn`"
            >
              <span class="d-lg-none pr-2">{{ $t('Common.MoreDetails') }}</span>
              <icon name="next-icon" class="text-primary icon-size-3" />
            </b-button>
          </template>

          <template v-slot:cell(analytic)="row">
            <b-button variant="outline-primary" block @click="openAnalyticModal(row.item)">
              <icon name="chart-bar" />
              <span class="pl-2 d-lg-none d-xl-inline-block">{{ $t('Common.View') }}</span>
            </b-button>
          </template>
        </b-table>

        <div class="eshop">
          <pagination
            v-show="!isLoading('loadingBundleList')"
            name="my-bundle-listing"
            class="eshop-pagination text-center"
            :total="getBundleListPaginationMeta.total"
            :per-page="getBundleListPaginationMeta.per_page"
            data-qa-prefix="myBundle-bundleListing"
          />
        </div>
      </b-col>
    </div>

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

<script>
import { mapGetters, mapActions } from 'vuex'
import Pagination from '@/app/_global/components/elements/Pagination'
import NativeShareButton from '@/app/_global/components/elements/NativeShareButton'
import BundleAnalysisModal from '@/app/my-bundle/_global/components/blocks/BundleAnalyticModal'
export default {
  name: 'BundleListing',
  components: { BundleAnalysisModal, NativeShareButton, Pagination },
  data() {
    return {
      bundleFields: [
        { key: 'index', label: this.$t('Common.Table.No') },
        { key: 'bundle_name', label: this.$t('MyBundle.Listing.TableHeader.BundleTitle') },
        {
          key: 'bundle_description',
          label: this.$t('MyBundle.Listing.TableHeader.BundleDescription'),
          formatter: 'shortenDescription',
        },
        { key: 'bundle_total', label: this.$t('Common.Sales.Total'), class: ['text-right'] },
        {
          key: 'bundle_details_link',
          label: this.$t('MyBundle.Listing.TableHeader.ShareBundle'),
          class: ['text-center'],
        },
        {
          key: 'analytic',
          label: this.$t('MyBundle.BundleAnalytic.Analytic'),
          class: ['text-center'],
        },
        {
          key: 'more_details',
          label: this.$t('MyBundle.Listing.TableHeader.BundleDetails'),
          class: ['text-right', 'text-lg-center', 'text-lg-hide'],
        },
      ],
    }
  },
  computed: {
    ...mapGetters(['isLoading']),
    ...mapGetters('myBundle', ['getBundleList', 'getBundleListPaginationMeta']),
  },
  methods: {
    ...mapActions('myBundle', ['loadBundleList']),
    shortenDescription(val) {
      let maxLength = 70
      return (val && (val.length > maxLength ? `${val.substr(0, maxLength)} ...` : val)) || '-'
    },
    openAnalyticModal(val) {
      this.$refs['bundle-analytic'].show(val)
    },
  },
  watch: {
    '$route.params.page': {
      handler(page) {
        let payload = {
          offset: this.getBundleListPaginationMeta.per_page * (page - 1),
          limit: this.getBundleListPaginationMeta.per_page,
        }
        this.loadBundleList(payload)
      },
      immediate: true,
    },
  },
}
</script>
