<template>
  <div class="home-page">
    <Hero
      :slots="[['1fr'], ['1fr']]"
      :tablet-slots="[['1fr']]"
      :overlap="overlap"
    >
      <template #1-1>
        <ShortcutsListing
          :border="false"
          :background="true"
          :fractions="2"
          :background-color="$_theme('colorLight')"
        />
      </template>

      <template #2-1>
        <Birthdays
          direction="row"
          :dots-enabled="true"
          @onDataFetched="data => (overlap = !!data.length)"
        />
      </template>

      <template #1-1-tablet>
        <Birthdays
          direction="row"
          :dots-enabled="true"
          @onDataFetched="data => (overlap = !!data.length)"
        />
      </template>
    </Hero>

    <TemplateContainer size="l" class="main-content">
      <FeaturedNewsWithData />

      <Separator :color="$_theme('colorPrimary')" />

      <Block
        :title="$_tr('EVENTS.title')"
        :title-options="{ alignment: 'center' }"
        :link-label="$_tr('EVENTS.link')"
        :link="{ name: 'EventsCalendarPage' }"
      >
        <EventsListing />
      </Block>

      <Separator :color="$_theme('colorPrimary')" />

      <Block
        :title="$_tr('NEWS.title')"
        :title-options="{ alignment: 'center' }"
        :link="{ name: 'NewsListingPage' }"
        :link-label="$_tr('NEWS.link')"
      >
        <NewsListing />
      </Block>

      <Separator :color="$_theme('colorPrimary')" />

      <div class="bottom-actions-container">
        <Block
          :title="$_tr('ACTIVITIES.title')"
          :link="{ name: 'ActivitiesListingPage' }"
          :link-label="$_tr('ACTIVITIES.link')"
          title-tag="h3"
        >
          <BlockActivities class="small" />
        </Block>

        <Block
          :title="$_tr('ROTATION_SERVICE.title')"
          :link="{ name: 'RotationsListingPage' }"
          :link-label="$_tr('ROTATION_SERVICE.link')"
          title-tag="h3"
        >
          <RotationService />
        </Block>

        <Block :title="$_tr('COMPLIANCE.title')" title-tag="h3">
          <Compliance />
        </Block>
      </div>
    </TemplateContainer>
  </div>
</template>

<script>
import Hero from '@inside-commons/components/lib/Hero'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import Separator from '@inside-commons/components/lib/Separator'
import Block from '@inside-commons/components/lib/Block'

import ShortcutsListing from '@inside-users/components/lib/ShortcutsListing'
import Birthdays from '@inside-birthdays/components/lib/WidgetBirthdaysContainer'
import BlockActivities from '@inside-activities/BlockActivities'

import RotationService from '../components/home/RotationService'
import Compliance from '../components/home/Compliance'
import FeaturedNews from '../components/home/FeaturedNews'
import EventsListing from '../components/home/EventsListing'
import NewsListing from '../components/home/NewsListing'

import { fetchFeaturedNews } from '../fetch'

import { withFetch } from 'inside-collection/hocs'
import { CardImage } from 'inside-collection/components'

export default {
  name: 'HomePage',
  $_i18nRootPath: 'customs.HOME_PAGE',
  components: {
    Block,
    Hero,
    TemplateContainer,
    Separator,
    ShortcutsListing,
    Birthdays,
    EventsListing,
    NewsListing,
    BlockActivities,
    CardImage,
    Compliance,
    RotationService,
    FeaturedNewsWithData: withFetch(FeaturedNews, { size: 'xl' })(
      fetchFeaturedNews
    )
  },
  data() {
    return {
      overlap: false
    }
  },
  beforeMount() {
    this.$store.commit('setContentMainsActions', {
      add: [
        'events',
        'event_categories',
        'floor_maps',
        'forms',
        'news',
        'pages'
      ]
    })
  }
}
</script>

<style lang="scss">
.home-page {
  > .main-content {
    margin-top: calc(var(--spacing-3xl) * 2);

    .bottom-actions-container {
      display: grid;
      gap: var(--spacing-m);
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

      .block-container {
        display: flex;
        flex-direction: column;

        .ds-container-container,
        .block-rotations-container-no-data,
        .block-activities__container {
          height: 218px;
        }
      }
    }
  }

  .hero-container {
    .template-container-container {
      .center {
        align-items: center !important;
      }
    }
  }
}
</style>
