<template>
  <div class="tabs-paragraph">
    <div class="tabs-paragraph__header">
      <ul class="df-center-y">
        <li
          v-for="(page, index) in getPages"
          :key="page.uuid"
          :class="{ 'tabs-paragraph__item--active': index === currentPage }"
          @click="currentPage = index"
        >
          {{ unescapeHtml(page.title) }}
        </li>
      </ul>
    </div>

    <div class="tabs-paragraph__content">
      <paragraph-listing
        :heritedData="getCurrentPage(currentPage)"
        :heritedOptions="{ template: true }"
      />
    </div>
  </div>
</template>

<script>
import { unescapeHtml } from '@inside-library/filters/UnescapeHtml'

export default {
  name: 'TabsParagraph',
  data() {
    return {
      currentPage: 0
    }
  },
  computed: {
    getPages() {
      return this.heritedData.pages.data
    },
    getCurrentPage() {
      return index => this.heritedData.pages.data[index].content
    }
  },
  methods: {
    unescapeHtml
  }
}
</script>

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

.tabs-paragraph {
  margin: 30px 0;

  &__header {
    ul::after {
      z-index: 1;
      background: var(--color-grey-100);
    }

    li {
      position: relative;
      padding: 15px 25px 17px;
      cursor: pointer;
      font-size: 18px;

      @include transition(all 0.4s);

      &::after {
        z-index: 2;
        background: var(--color-primary);
        opacity: 0;

        @include transition(opacity 0.4s);
      }

      &.tabs-paragraph__item--active {
        &::after {
          opacity: 1;
        }
      }
    }

    ul,
    li {
      position: relative;

      &::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 2px;
        content: '';
      }
    }
  }

  &__content {
    padding: 20px;
    background: var(--color-grey-light);
  }
}
</style>
