<template>
  <div class="fetched-content-template-container">
    <div class="back-link-container">
      <Back
        :href="{
          name: 'Space',
          params: { slug: fetchedData.franchised_spaces.slug[0] }
        }"
      >
        {{ $_tc('back', [fetchedData.franchised_spaces.title]) }}
      </Back>
    </div>

    <TemplateContainer size="s">
      <scaffolded-data
        v-bind="fetchedData"
        :data="m_scaffoldedData"
        class="content-container"
      />
    </TemplateContainer>
  </div>
</template>

<script>
import { markRaw } from 'vue'

import ScaffoldDataMixin from '@inside-commons/mixins/scaffold-props-mixin'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import Back from '@inside-commons/components/lib/Back'
import ContentComments from '@inside-comments/components/ContentComments'
import HrUi from '@inside-library/components/ui/HrUi'
import Banner from '@inside-commons/components/lib/Banner'
import UserCard from '../directory/UserCard'

import { Link } from 'inside-collection/components'

import { isEditionRole } from '../../helpers/index'

export default {
  name: 'fetched-content-template',
  $_i18nRootPath: 'customs.SPACE.VISIT_REPORT_LISTING',
  components: {
    TemplateContainer,
    Link,
    UserCard,
    Back,
    ContentComments,
    HrUi,
    Banner
  },
  mixins: [ScaffoldDataMixin],
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  },
  computed: {
    editionEnabled() {
      return isEditionRole()
    }
  },
  methods: {
    defaultScaffold() {
      return [
        {
          id: 'date',
          classe: 'date',
          tag: 'date-ui',
          data: { date: this.fetchedData.updated_at }
        },
        {
          id: 'banner',
          class: 'banner',
          tag: markRaw(Banner),
          data: {
            page: 'SpaceVisitReport',
            editionEnabled: this.editionEnabled,
            staticData: this.fetchedData
          }
        },
        {
          id: 'content',
          tag: 'paragraph-listing',
          class: 'default-text',
          hideIf: () => !this.fetchedData.content,
          data: {
            heritedData: this.fetchedData.content,
            heritedOptions: { template: true }
          }
        },
        {
          id: 'author',
          tag: markRaw(UserCard),
          class: 'author',
          data: {
            ...this.fetchedData.authors,
            image: this.$_getContentImage(
              this.fetchedData.authors.image,
              'small'
            )
          },
          label: this.$_tr('author'),
          hideIf: () => !this.fetchedData.authors
        },
        {
          id: 'hr-ui',
          class: 'hr-ui',
          tag: markRaw(HrUi),
          hideIf: () => !this.fetchedData.comments
        },
        {
          id: 'comments',
          tag: markRaw(ContentComments),
          class: 'comments',
          data: {
            ...this.fetchedData.comments,
            answersEnabled: false,
            parent: {
              contentType: this.fetchedData.content_type,
              slug: this.fetchedData.slug[0],
              uuid: this.fetchedData.uuid
            }
          },
          hideIf: () => !this.fetchedData.comments
        }
      ]
    }
  }
}
</script>

<style lang="scss">
.fetched-content-template-container {
  .back-link-container {
    margin-bottom: var(--spacing-xl);
  }

  .content-container {
    .date-ui-container {
      text-align: center;
      color: var(--color-grey-600);
      margin-bottom: var(--spacing-s);
    }

    h1.ds-title-container {
      text-align: center;
      margin-bottom: var(--spacing-xl);
    }

    > .author {
      margin-top: var(--spacing-xl);
      width: 100%;

      .author {
        margin: 0 auto;
        max-width: 400px;
      }

      .label {
        text-align: center;
        margin-bottom: var(--spacing-m);
        color: var(--color-text);
        font-size: var(--font-size-h4);
        font-weight: var(--font-weight-bold);
      }
    }

    .line {
      background: var(--color-grey);
    }
  }
}
</style>
