<template>
  <div class="space-page">
    <Banner
      :static-data="fetchedData"
      :add="['spaces_categories', 'links_spaces', 'jobs_page']"
    />

    <TemplateContainer size="l">
      <TwoColumnsLayout>
        <template #sidebar>
          <ParagraphListing
            v-if="fetchedData.content"
            :herited-data="fetchedData.content"
            :herited-options="{ template: true }"
          />
        </template>

        <template #main>
          <SpaceNewsSlider :news="fetchedData.news.data" class="mb-l" />

          <GroupBy
            endpoint="content/spaces_categories"
            root-path="pages.data"
            :fields="requestFields"
            :filters="requestFilters"
            :on-request-success="handleRequestSuccess"
          />
        </template>
      </TwoColumnsLayout>
    </TemplateContainer>
  </div>
</template>

<script>
import { isExternal } from 'inside-collection/helpers'

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 ParagraphListing from '@inside-library/components/listing/ParagraphListing'

import GroupBy from '@inside-links/components/lib/GroupBy'

import SpaceNewsSlider from '../../components/spaces/SpaceNewsSlider'

export default {
  name: 'SpacePage',
  $_i18nRootPath: 'customs.SPACE',
  components: {
    Banner,
    TemplateContainer,
    TwoColumnsLayout,
    ParagraphListing,
    GroupBy,
    SpaceNewsSlider
  },
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      requestFields: [
        'uuid',
        'title',
        'content_type',
        'admin',
        'langcode',
        { spaces: ['uuid', 'content_type', 'slug'] },
        {
          links_spaces: {
            fields: ['uuid', 'title', 'content_type', 'admin', 'file', 'link'],
            filters: { 'status:eq': 1, sort: 'weight:asc', reverse: true }
          }
        },
        {
          jobs_page: {
            fields: ['uuid', 'title', 'content_type', 'admin', 'slug'],
            filters: { 'status:eq': 1, sort: 'weight:asc', reverse: true }
          }
        }
      ],
      requestFilters: {
        'status:eq': 1,
        sort: 'weight:asc',
        spaces: { 'slug:eq': this.$route.params.slug }
      }
    }
  },
  methods: {
    handleRequestSuccess: ({ data }) => {
      return data.map(({ jobs_page: jobs, links_spaces: links, ...rest }) => ({
        ...rest,
        pages: {
          data: [...jobs.data, ...links.data].map(
            ({ link, slug, ...item }) => ({
              ...item,
              link:
                item.content_type === 'jobs_page'
                  ? {
                      name: 'JobsPage',
                      params: {
                        slug: rest.spaces.data[0].slug[0],
                        jobs: slug[0]
                      }
                    }
                  : isExternal(link)
                  ? link
                  : {
                      name: 'SimplePage',
                      params: {
                        slug:
                          link && link.startsWith('/') ? link.slice(1) : link
                      }
                    }
            })
          )
        }
      }))
    }
  }
}
</script>

<style lang="scss">
.space-page {
  .paragraph-text {
    margin-bottom: var(--spacing-l);
  }

  .links-category-container {
    .title-container {
      display: flex;
      align-items: center;
      padding-bottom: var(--spacing-m);
      border-bottom: 1px solid var(--color-primary);

      .title {
        color: var(--color-primary);
      }
    }
  }
}
</style>
