<template>
  <div class="offers-listing-page-container">
    <Banner
      page="offers-listing"
      :add="['offers', 'offers_categories']"
      :dark-mode="false"
    >
      <template #footer>
        <Button type="secondary" @click="handleClick()">
          {{ $_tr('cta.title') }}
        </Button>
      </template>
    </Banner>

    <TemplateContainer size="l">
      <div class="offers-filters">
        <filters-container :id="filtersId" :filters="filters" />

        <Link
          :href="{ name: 'Add', params: { content: 'offers' } }"
          :inline="false"
        >
          <Button type="secondary">{{ $_tr('button.title') }}</Button>
        </Link>
      </div>

      <TemplateContainer size="s">
        <component-listing
          id="offers-listing"
          :endpoint="endpoint"
          :fields="requestFields"
          :filters="requestFilters"
          :filter-id="filtersId"
          :items-per-page="12"
          :grid-gap="$_theme('spacingXxl')"
          :search-in="['offers']"
          :fractions="1"
          direction="vertical"
          pagination="bar"
        >
          <template #default="{ item }">
            <Capsule :key="item.uuid" size="small" v-bind="item" />
          </template>
        </component-listing>
      </TemplateContainer>
    </TemplateContainer>
  </div>
</template>

<script>
import { Link, Button } from 'inside-collection/components'

import Banner from '@inside-library/components/commons/components/lib/Banner'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'

import Capsule from '../../components/offers/Capsule'

export default {
  name: 'OffersListingPage',
  $_i18nRootPath: 'customs.OFFERS.LISTING',
  components: {
    Banner,
    Capsule,
    TemplateContainer,
    Link,
    Button
  },
  props: {
    fetchedData: {
      type: Object
    }
  },
  data() {
    return {
      endpoint: 'content/offers',
      filtersId: 'offers-listing-filters',
      requestFilters: {
        'status:eq': 1,
        sort: 'published_at:desc',
        'published_at:lte': 'now()'
      },
      requestFields: [
        'uuid',
        'published_at',
        'updated_at',
        'title',
        'chapo',
        'image',
        'slug',
        'content_type',
        'content',
        'localisations',
        'email_address',
        {
          offers_categories: {
            fields: ['uuid', 'title', 'color', 'content_type', 'image'],
            filters: { 'status:eq': 1 }
          }
        },
        { reactions: { users: ['uuid'] } }
      ]
    }
  },
  computed: {
    filters() {
      return [
        {
          modelName: 'search',
          type: 'text',
          label: this.$_tr('filters.search')
        },
        {
          id: 'offersCategories',
          type: 'selectbox',
          modelName: 'category',
          label: this.$_tr('filters.offersCategories'),
          fetch: true,
          reference: 'offers_categories',
          fields: ['uuid', 'title'],
          filters: { 'status:eq': 1, sort: 'title:asc' },
          objectLabelKey: 'title',
          objectValueKey: 'uuid'
        },
        {
          id: 'localisations',
          type: 'selectbox',
          modelName: 'localisations',
          label: this.$_tr('filters.offersLocation'),
          fetch: true,
          reference: 'localisations',
          fields: ['uuid', 'title'],
          filters: { 'status:eq': 1, sort: 'title:asc' },
          objectLabelKey: 'title',
          objectValueKey: 'uuid'
        },
        {
          modelName: 'bookmark',
          type: 'on-off',
          filterOn: '',
          callback: () => ({}),
          label: this.$_tr('filters.favorites'),
          urlDisabled: true,
          listeners: {
            onDataChange: ({ value }) => {
              this.endpoint = value
                ? `users/reactions/bookmark/${this.getUserInfos.uuid}`
                : 'content/offers'
              this.requestFilters = value
                ? {
                    'content_type:eq': 'offers',
                    'status:eq': 1,
                    sort: 'published_at:desc',
                    'published_at:lte': 'now()'
                  }
                : {
                    'status:eq': 1,
                    sort: 'published_at:desc',
                    'published_at:lte': 'now()'
                  }
            }
          }
        }
      ]
    }
  },
  methods: {
    handleClick() {
      this.triggerModal(
        'offers',
        'fetch',
        { item: { uuid: this.fetchedData.uuid }, content: 'custom' },
        {
          layout: 'right',
          size: 'm',
          transition: 'fadeInLeft'
        }
      )
    }
  }
}
</script>

<style lang="scss">
.offers-listing-page-container {
  .banner-container .footer {
    display: flex;
    justify-content: center;
  }

  .offers-filters {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: var(--spacing-xxl) 0;

    .filter-item-container,
    .input-checkbox {
      width: 200px;
    }

    .input-checkbox {
      margin-top: auto;

      .input-choices {
        display: flex;
        flex-direction: row-reverse;
      }
    }
  }
}
</style>
