<template>
  <div class="pp-page">
    <Back size="l" :href="{ name: 'HomePage' }" class="no-print">
      {{ $_tr('back') }}
    </Back>

    <TemplateContainer size="s" class="pp-page-container">
      <BaseText class="type">
        {{ $_tr('p-p') }}
      </BaseText>

      <Title class="py-m news-title">{{ fetchedData.data.title }}</Title>

      <BaseText class="date">
        {{ $_tr('date', [$_formatDate(fetchedData.data.updated_at)]) }}
      </BaseText>

      <BlockPPHeader
        :category="fetchedData.data.p_and_p_categories.title"
        :brands="fetchedData.data.brands.data"
        :management-modes="fetchedData.data.management_modes.data"
        class="mt-l"
      />

      <BlockPPSideActions
        :title="fetchedData.data.title"
        :url="fetchedData.data.slug[0]"
      />

      <BlockPPInfos
        :definition="fetchedData.data.definition"
        :policy="fetchedData.data.policy"
      />

      <Title tag="h3" class="my-xl">{{ $_tr('procedure') }}</Title>

      <paragraph-listing
        v-if="getCheckedData(fetchedData.data, 'content')"
        :herited-data="fetchedData.data.content"
        :herited-options="{ template: true }"
      />
    </TemplateContainer>

    <BlockPPContact
      :title="
        $_tc(
          'contactTitle',
          [fetchedData.data.contact.data.length || 0],
          $_currentLang,
          fetchedData.data.contact.data.length || 0
        )
      "
      :users="fetchedData.data.contact.data"
      class="mt-l"
    />

    <TemplateContainer size="l">
      <BlockPPRegionalContact
        v-if="fetchedData.data.content_type === 'p_and_p'"
        :contacts="fetchedData.regions"
        class="mt-xxl"
      />
    </TemplateContainer>
  </div>
</template>

<script>
import { Title, BaseText } from 'inside-collection/atoms'

import Back from '@inside-commons/components/lib/Back'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'

import BlockPPSideActions from '../../components/pp/BlockPPSideActions'
import BlockPPContact from '../../components/pp/BlockPPContact'
import BlockPPHeader from '../../components/pp/BlockPPHeader'
import BlockPPInfos from '../../components/pp/BlockPPInfos'
import BlockPPRegionalContact from '../../components/pp/BlockPPRegionalContact'

export default {
  name: 'PPPage',
  $_i18nRootPath: 'customs.pp.PAGE',
  components: {
    Title,
    BaseText,
    Back,
    TemplateContainer,
    BlockPPSideActions,
    BlockPPContact,
    BlockPPHeader,
    BlockPPInfos,
    BlockPPRegionalContact
  },
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  },
  mounted() {
    this.$store.commit('setContentMainsActions', {
      add:
        this.fetchedData.data.content_type === 'p_and_p'
          ? ['p_and_p']
          : ['p_and_p_france'],
      edit: {
        uuid: this.fetchedData.data.uuid,
        contentType: this.fetchedData.data.content_type,
        admin: this.fetchedData.data.admin
      }
    })
  }
}
</script>

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

.pp-page {
  @include wysiwyg-table;

  .pp-page-container {
    position: relative;

    .news-title {
      color: var(--color-primary);
      font-size: var(--font-size-h1);
      font-weight: 600;
      text-align: center;

      @include mobile {
        font-size: var(--font-size-h2);
      }
    }

    .type,
    .date {
      text-align: center;

      @include fontSize(14);
    }

    .ds-title-container {
      font-weight: var(--font-weight-bold);
      text-align: center;
    }

    .block-news-side-actions-container {
      @include tablet {
        margin-top: var(--spacing-l);
      }
    }
  }
}
</style>
