<template>
  <div class="cart-listing-container">
    <component-listing
      :id="listingId"
      :endpoint="`users/reactions/basket/${getUserInfos.uuid}`"
      :fields="[
        'title',
        'uuid',
        'file',
        'description',
        'published_at',
        {
          reactions: ['count', { users: ['uuid'] }]
        }
      ]"
      :fractions="1"
    >
      <template #default="{ item }">
        <FileParagraph
          :key="item.uuid"
          :herited-data="{ file: item }"
          @removeDocument="onRemove"
        />
      </template>

      <template #no-data>
        <BaseText>
          {{ $_tr('customs.CART.empty') }}
        </BaseText>
      </template>
    </component-listing>

    <AsyncActionButton
      class="cart-download"
      icon="download"
      @click="onDownload"
    >
      {{ $_tr('customs.CART.download') }}
    </AsyncActionButton>
  </div>
</template>

<script>
import { http } from '@inside-library/helpers/Http'
import { BaseText } from 'inside-collection/atoms'
import { AsyncActionButton } from 'inside-collection/components'
import RefreshListingMixin from '@inside-listings/mixins/refresh-listing-mixin'
import FileParagraph from '../../../inside-overrides/inside-library/paragraphs/FileParagraph'

export default {
  name: 'CartListing',
  components: {
    BaseText,
    FileParagraph,
    AsyncActionButton
  },
  mixins: [RefreshListingMixin],
  props: {
    fetchedData: {
      type: Array
    }
  },
  data() {
    return {
      listingId: 'cart-listing'
    }
  },
  methods: {
    onRemove(item) {
      this.$_deleteItem({
        listingId: this.listingId,
        item
      })
    },
    async onDownload() {
      return new Promise(resolve => {
        http
          .get('basket')
          .then(() => {
            this.$_triggerSuccessToast({
              text: this.$_tr('customs.CART.inProgress')
            })
          })
          .catch(() => {
            this.$_triggerErrorToast({
              text: this.$_tr('customs.CART.error')
            })
          })
          .then(() => {
            resolve()
          })
      })
    }
  }
}
</script>

<style lang="scss">
.cart-download {
  margin-top: var(--spacing-m);
}
</style>
