<template>
  <div class="space-page">
    <Banner
      :static-data="fetchedData"
      :add="['spaces_pages', 'pages_categories', 'spaces']"
    />

    <TemplateContainer size="l">
      <TwoColumnsLayout mobile-direction="reverse">
        <template #sidebar>
          <SpaceKeyContacts
            v-if="fetchedData.users.data.length"
            :users="fetchedData.users.data"
          />

          <ToolsListingBlock
            v-if="fetchedData.tools.data.length"
            :static-data="fetchedData.tools.data"
          />
        </template>

        <template #main>
          <SpaceNewsSlider v-if="news.length" :news="news" />

          <SpaceNewcomers v-if="displayNewcomers" />

          <SpaceCategoriesPages v-if="hasCategoriesPages" />
        </template>
      </TwoColumnsLayout>
    </TemplateContainer>
  </div>
</template>

<script>
import { unique } from '@inside-library/helpers/Arrays'

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 ToolsListingBlock from '@inside-tools/components/lib/ToolsListingBlock'

import SpaceKeyContacts from '../../components/spaces/SpaceKeyContacts'
import SpaceNewsSlider from '../../components/spaces/SpaceNewsSlider'
import SpaceNewcomers from '../../components/spaces/SpaceNewcomers'
import SpaceCategoriesPages from '../../components/spaces/SpaceCategoriesPages'

export default {
  name: 'SpacePage',
  components: {
    Banner,
    TemplateContainer,
    TwoColumnsLayout,
    SpaceKeyContacts,
    ToolsListingBlock,
    SpaceNewsSlider,
    SpaceNewcomers,
    SpaceCategoriesPages
  },
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      news: unique(
        this.fetchedData.news_categories.data.flatMap(cat => cat.news.data),
        'uuid'
      ),
      hasCategoriesPages: this.fetchedData.pages_categories.count > 0,
      displayNewcomers: this.fetchedData.display_new_users
    }
  }
}
</script>

<style lang="scss">
.links-group-with-tabs-container {
  margin-top: var(--spacing-xl);
}
</style>
