<template>
  <div class="group-container">
    <Banner
      :static-data="fetchedData"
      :back="{ href: { name: 'GroupsPage' } }"
      image-key="image"
    />

    <TemplateContainer size="l">
      <TwoColumnsLayout>
        <template #sidebar>
          <Block
            v-if="users.length"
            :title="$_tr('titles.members')"
            :title-tag="titleTag"
            :link="{
              name: 'GroupMembersPage',
              params: { slug: fetchedData.slug[0] }
            }"
            :link-label="$_tr('links.members')"
          >
            <Members
              :users="users"
              :admins="referents"
              visibility="restricted"
            />
          </Block>

          <Block
            v-if="events.length"
            :title="$_tr('titles.events')"
            :title-tag="titleTag"
          >
            <EventsListing :events="events" />
          </Block>

          <Block
            v-if="news.length"
            :title="$_tr('titles.news')"
            :title-tag="titleTag"
          >
            <NewsListing :news="news" />
          </Block>

          <Block
            v-if="tools.length"
            :title="$_tr('titles.tools')"
            :title-tag="titleTag"
          >
            <ToolsListing :tools="tools" />
          </Block>
        </template>

        <template #main>
          <Block v-if="fetchedData.content">
            <paragraph-listing
              :herited-data="fetchedData.content"
              :herited-options="{ template: true }"
            />
          </Block>

          <Block
            v-if="folders.length"
            :title="$_tr('titles.documents')"
            :title-tag="titleTag"
          >
            <FoldersListing
              :folder="folders[0].uuid"
              :sub-folders="subFolders"
            />
          </Block>
        </template>
      </TwoColumnsLayout>
    </TemplateContainer>
  </div>
</template>

<script>
import Banner from '@inside-commons/components/lib/Banner'
import Back from '@inside-commons/components/lib/Back'
import TwoColumnsLayout from '@inside-commons/components/lib/TwoColumnsLayout'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import Block from '@inside-commons/components/lib/Block'

import Members from '@inside-teams/components/lib/ResumeMembersTeam'

import EventsListing from '../../components/groups/GroupsEventsListing'
import NewsListing from '../../components/groups/GroupsNewsListing'
import ToolsListing from '../../components/groups/GroupsToolsListing'
import FoldersListing from '../../components/groups/GroupsFoldersListing'

export default {
  name: 'GroupContainer',
  $_i18nRootPath: 'customs.GROUPS.CONTAINER',
  components: {
    Banner,
    Back,
    TemplateContainer,
    TwoColumnsLayout,
    Block,
    Members,
    EventsListing,
    NewsListing,
    ToolsListing,
    FoldersListing
  },
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      referents: this.fetchedData.spaces_referents.data,
      users: this.fetchedData.users.data,
      events: this.fetchedData.events.data,
      tools: this.fetchedData.tools.data,
      news: this.fetchedData.news.data,
      folders: this.fetchedData.folders.data,
      subFolders: this.getCheckedData(
        this.fetchedData,
        ['folders', 'data', 0, 'folders', 'data'],
        []
      ),
      titleTag: 'h3'
    }
  }
}
</script>
