<template>
  <div class="pp-listing-page">
    <Banner
      :add="['p_and_p', 'p_and_p_france', 'p_and_p_categories', 'blocks']"
      page="homepage"
      class="pp-listing-banner"
    >
      <template #footer>
        <button class="btn-reset export" @click="exportContact">
          <BaseText :dark-mode="true"> {{ $_tr('export') }} </BaseText>
        </button>
      </template>
    </Banner>

    <TemplateContainer size="l" class="pp-listing-container">
      <TwoColumnsLayout>
        <template #sidebar>
          <BlockPPListingCta />

          <BlockPPListingInfos />
        </template>

        <template #main>
          <BlockPPListingSearches />

          <BlockPPListingGroups v-if="hasPAndPCategories" />
        </template>
      </TwoColumnsLayout>
    </TemplateContainer>
  </div>
</template>

<script>
import { BaseText } from 'inside-collection/atoms'
import { Link } from 'inside-collection/components'

import { http } from '@inside-library/helpers/Http'
import Banner from '@inside-commons/components/lib/Banner'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import TwoColumnsLayout from '@inside-commons/components/lib/TwoColumnsLayout'

import BlockPPListingCta from '../components/pp-listing/BlockPPListingCta'
import BlockPPListingInfos from '../components/pp-listing/BlockPPListingInfos'
import BlockPPListingSearches from '../components/pp-listing/BlockPPListingSearches'
import BlockPPListingGroups from '../components/pp-listing/BlockPPListingGroups'

export default {
  name: 'HomePage',
  $_i18nRootPath: 'customs.pp.LISTING',
  components: {
    BaseText,
    Link,
    Banner,
    TemplateContainer,
    TwoColumnsLayout,
    BlockPPListingCta,
    BlockPPListingInfos,
    BlockPPListingSearches,
    BlockPPListingGroups
  },
  data() {
    return {
      hasPAndPCategories: false
    }
  },
  async mounted() {
    try {
      const { data } = await http.get('content/p_and_p_categories', {
        fields: ['uuid', 'title']
      })

      this.hasPAndPCategories = !!data.length
    } catch (err) {
      throw new Error(err)
    }
  },
  methods: {
    async exportContact() {
      try {
        await http.post('pplh/p_and_p/export')

        this.$_triggerToast({
          type: 'success',
          text: this.$_tr('actions.export.success')
        })
      } catch (err) {
        this.$_triggerToast({
          type: 'error',
          text: err
        })
      }
    }
  }
}
</script>

<style lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.pp-listing-page {
  .pp-listing-banner {
    top: -75px;
    padding: var(--spacing-3xl) 5% 0;

    .footer {
      text-align: center;

      .export {
        display: block;
        padding: var(--spacing-s) var(--spacing-xl);
        margin: 0 auto;
        border: 1px solid var(--color-light);
        border-radius: var(--radius-l);

        @include transition(all 0.4s);

        &:hover {
          color: #09a5ab;
          background: var(--color-light);

          .ds-base-text-container {
            color: var(--color-text);

            @include transition(all 0.4s);
          }
        }
      }
    }
  }

  .pp-listing-container {
    position: relative;
    top: -75px;
  }
}
</style>
