<template>
  <div class="homepage-notes-container">
    <Container :background="true" :border="false" class="block-notes-container">
      <h1 v-if="notes">{{ notes.title }}</h1>
      <p v-if="notes"><span v-html="notes.chapo" /></p>

      <button class="btn-reset" @click="openModal(notes)">
        {{ $_tr('customs.HOMEPAGE.button') }}
      </button>
    </Container>
  </div>
</template>

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

import { Container } from 'inside-collection/components'

export default {
  name: 'HomepageBlockNotes',
  components: {
    Container
  },
  $_i18nRootPath: 'customs.HOMEPAGE',
  data() {
    return {
      notes: null
    }
  },
  computed: {
    client() {
      const client = this.getStore('getUserInformation', 'client').machine_name
      if (this.getUserInfos.is_key_account_manager && client) {
        return this.getStore('getUserInformation', 'client').machine_name
      }
      return this.getUserInfos.clients.data[0].machine_name
    }
  },
  beforeMount() {
    this.fetchNotes()
  },
  methods: {
    async fetchNotes() {
      try {
        const { data } = await http.get(
          'content/cenexi_notes',
          {
            fields: ['uuid', 'title', 'chapo', 'content'],
            filters: {
              sites: {
                'uuid:eq': this.getStore('getUserInformation', 'site').uuid
              },
              clients: { 'machine_name:eq': this.client }
            }
          },
          { useLangcode: true }
        )
        this.notes = this.getCheckedData(data, [0])
      } catch (err) {
        throw new Error(err)
      }
    },
    openModal(item) {
      this.triggerModal(
        'banner-homepage',
        'fetch',
        { item, content: 'cenexi_notes' },
        {
          layout: 'right',
          width: 712,
          transition: 'fadeInLeft',
          closeAll: true
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.homepage-notes-container {
  margin-left: var(--spacing-m);

  .ds-container-container.has-background {
    background: rgba(var(--color-primary-rgb), 0.9);
  }

  @include mobile {
    margin-left: 0;
    margin-top: var(--spacing-m);
  }

  .block-notes-container {
    position: relative;
    height: 100%;
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-3xl)
      var(--spacing-xl);
    color: var(--color-light);

    h1 {
      font-family: var(--font-ternary);
      font-size: var(--font-size-h4);
    }

    p {
      $line-height: 20px;
      $max-lines: 6;
      color: var(--color-light);
      margin-top: var(--spacing-m);
      line-height: $line-height;
      max-height: $line-height * $max-lines;
      overflow: hidden;
    }

    button {
      position: absolute;
      right: var(--spacing-m);
      bottom: var(--spacing-l);
      margin-top: var(--spacing-m);
      color: var(--color-light);
      font-size: var(--font-size-labor);
      text-decoration: underline;
    }
  }
}
</style>
