<template>
  <div class="doc-ged-modal">
    <div class="modal__header" :class="{ 'modal__header-shadow': addShadow }">
      <slot name="closeModal" />

      <h3>{{ heritedData.title }}</h3>

      <tab-block-utils :tabs="tabs" @tabUpdated="updateTabIndex" />
    </div>

    <div ref="body" class="modal__body">
      <div class="modal__body-actions">
        <bookmark-ui
          v-if="isAlive(heritedData, ['reactions', 'data'])"
          :heritedData="{
            type: 'bookmark',
            related_uuid: heritedData.uuid,
            related_type: heritedData.content_type,
            reactions: heritedData.reactions
          }"
        />
      </div>

      <div class="modal__body-text default-text">
        <transition name="fadeIn">
          <paragraph-listing
            :heritedData="getCurrentParagraphs"
            :heritedOptions="{ template: true }"
          />
        </transition>
      </div>

      <div class="modal__body-footer">
        <p
          v-if="isAlive(heritedData, ['authors'])"
          v-html="
            $_tr('ged.DOC_GED_TAB.addBy', [
              $_formatDate(heritedData.published_at),
              heritedData.authors.firstname,
              heritedData.authors.lastname,
              '/'
            ])
          "
        />
      </div>
    </div>
  </div>
</template>

<script>
import modalMixin from '@inside-library/components/modals/mixins/modal-mixin'
import FileParagraph from '@inside-library/components/paragraphs/FileParagraph'

export default {
  name: 'doc-ged-tabs-modal',
  components: {
    FileParagraph
  },
  mixins: [modalMixin],
  data() {
    return {
      currentTabIndex: 0,
      tabs: this.heritedData.pages.data.map(page => page.title)
    }
  },
  computed: {
    getCurrentParagraphs() {
      return this.heritedData.pages.data[this.currentTabIndex].content
    }
  },
  watch: {
    $route() {
      const modalList = this.$store.getters.getModalList
      const modalKey = Object.keys(modalList)[0]

      this.closeModal(modalKey)
    }
  },
  methods: {
    updateTabIndex(index) {
      this.currentTabIndex = index
    }
  }
}
</script>

<style lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

div.doc-ged-modal {
  .modal {
    &__header {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 18rem;

      & > h3 {
        color: var(--color-light);
      }

      .tabs-container {
        .tabs__nav {
          margin: 0;
          margin-top: 2rem;

          li {
            position: relative;
            color: var(--color-light);
            margin-right: 3.5rem;

            &.active {
              color: var(--color-light) !important;

              &::after {
                content: '';
                position: absolute;
                bottom: -1.8rem;
                left: 0;
                width: 100%;
                height: 0.5rem;
                background-color: var(--color-primary);
                transition: all 0.3s ease;
              }
            }
          }
        }
      }
    }

    &__body {
      position: relative;
      max-width: 100rem;

      &-actions {
        position: absolute;
        top: 10rem;
        right: -4rem;
      }

      & > div {
        margin-bottom: 4rem;

        &:last-of-type {
          margin-bottom: 0;
        }
      }

      &--intro {
        padding: var(--spacing-xl) var(--spacing-xxl);
        border-radius: 2.3rem;
        background-color: var(--color-grey-light);

        .title {
          margin-bottom: 1.4rem;
          color: var(--color-text);
          text-align: center;
          font-size: 30px;
        }
      }

      &__section {
        margin-bottom: calc(var(--spacing-3xl) - var(--spacing-xs));

        &--content {
          @include wysiwyg;

          p {
            text-align: justify;
            line-height: 24px;

            &::after {
              content: '\00A0';
            }

            strong {
              font-size: 18px;
            }
          }
        }
      }
    }
  }
}
</style>
