<template>
  <Container
    v-if="rotation"
    :background="true"
    :background-color="$_theme('colorLight')"
    class="block-rotations-container"
  >
    <BaseText class="week">{{ getDates('L') }}</BaseText>

    <div class="user">
      <avatar-ui
        :herited-data="{
          image: $_getContentImage(
            getCheckedData(rotation, ['users', 'image']),
            'avatar'
          )
        }"
      />

      <div class="informations">
        <Title tag="h4" class="name">{{ $_username(rotation.users) }}</Title>

        <Link
          v-if="getCheckedData(rotation, ['users', 'email'])"
          :href="`mailto:${rotation.users.email}`"
          :inline="false"
        >
          <IconText :color="$_theme('colorPrimary')" icon="email">
            {{ rotation.users.email }}
          </IconText>
        </Link>

        <Link
          :color="$_theme('colorPrimary')"
          :hover-decoration-disabled="true"
          :href="{ name: 'SimplePage', params: { slug: 'rotation-service' } }"
          size="xxs"
          direction="row reverse"
          class="rules"
        >
          {{ $_tr('seeRules') }}
        </Link>
      </div>
    </div>
  </Container>

  <EmptyListing v-else class="block-rotations-container-no-data" />
</template>

<script>
import { Container, Link } from 'inside-collection/components'
import { IconText, Title, BaseText } from 'inside-collection/atoms'

import { http } from '@inside-library/helpers/Http'

import EmptyListing from '@inside-listings/components/sub-components/EmptyListing'

export default {
  name: 'RotationService',
  $_i18nRootPath: 'customs.HOME_PAGE.ROTATION_SERVICE',
  components: {
    Container,
    IconText,
    Link,
    Title,
    BaseText,
    EmptyListing
  },
  data() {
    return {
      rotation: {}
    }
  },
  async beforeMount() {
    this.rotation = await this.fetchRotation()
  },
  methods: {
    async fetchRotation() {
      try {
        const { data } = await http.get('content/rotations', {
          fields: [
            'uuid',
            'date',
            'end_date',
            { users: ['uuid', 'lastname', 'firstname', 'image', 'email'] }
          ],
          filters: {
            $or: [
              { 'date:gte': 'now()' },
              {
                'end_date:ne': null,
                'date:lte': 'now()',
                'end_date:gte': 'now()'
              }
            ],
            limit: 1,
            'status:eq': 1
          }
        })

        return data[0]
      } catch (err) {
        throw new Error(err)
      }
    },
    getDates(format) {
      return this.$_tc('between', [
        this.$_formatDate(this.rotation.date, format),
        this.$_formatDate(this.rotation.end_date, format)
      ])
    }
  }
}
</script>

<style lang="scss">
.block-rotations-container {
  padding: calc(var(--spacing-xl) + var(--spacing-s));

  .week {
    color: var(--color-text-light);
    margin-bottom: var(--spacing-l);
    margin-left: calc(var(--spacing-xxl) + var(--spacing-m));
  }

  .user {
    display: flex;

    .informations {
      margin-left: var(--spacing-m);

      .rules {
        margin-top: var(--spacing-s);
      }
    }
  }
}

.block-rotations-container-no-data {
  box-shadow: var(--shadow-default);

  .default {
    padding-top: calc(var(--spacing-xl) + var(--spacing-s));
  }
}
</style>
