<template>
  <div class="space-manager-page">
    <Banner
      :static-data="fetchedData"
      :add="[
        'manager_spaces_events',
        'manager_events_categories',
        'manager_spaces_tools'
      ]"
    />

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

          <MinimalCalendar
            endpoint="content/manager_spaces_events"
            calendar-direction="vertical"
            :background="false"
            :block-options="blockOptions"
            :extra-fields="[
              {
                manager_events_categories: {
                  fields: ['color'],
                  filters: { 'status:eq': 1 }
                }
              }
            ]"
            :component-attributes="componentAttributes"
          />
        </template>

        <template #main>
          <ManagerToolsListing />
        </template>
      </TwoColumnsLayout>
    </TemplateContainer>
  </div>
</template>

<script>
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 MinimalCalendar from '@inside-events/components/lib/MinimalCalendar'

import ManagerToolsListing from '../../components/manager/ManagerToolsListing'
import checkManagerAccess from '../../mixins/check-manager-access'

export default {
  name: 'SpaceManagerPage',
  $_i18nRootPath: 'customs.MANAGER',
  components: {
    Banner,
    TemplateContainer,
    TwoColumnsLayout,
    ParagraphListing,
    MinimalCalendar,
    ManagerToolsListing
  },
  mixins: [checkManagerAccess],
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      blockOptions: {
        title: this.$_tr('events.MINIMAL_CALENDAR.title'),
        link: {
          name: 'EventsCalendarManagerPage',
          params: { slug: this.$route.params.slug }
        },
        linkLabel: this.$t('events.MINIMAL_CALENDAR.more'),
        titleTag: 'h3'
      }
    }
  },
  beforeMount() {
    if (!this.$_checkManagerAccess) {
      this.$router.push({ name: 'HomePage' })
    }
  },
  methods: {
    componentAttributes(item) {
      return {
        to: { name: 'EventsManagerPage', params: { slug: item.slug[0] } }
      }
    }
  }
}
</script>
