<template>
  <div class="references-list df-center-y" @click="setShowTooltip">
    <BaseText :class="{ 'references-list--clickable': countIndication > 0 }">
      {{ referencesList }}
    </BaseText>

    <BaseText v-if="countIndication > 0">+ {{ countIndication }}</BaseText>

    <transition name="fadeIn">
      <div v-if="showTooltip" class="references-list--tooltip">
        <ul>
          <li v-for="reference in list" :key="reference.uuid">
            {{ reference.title }}
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>

<script>
import { BaseText } from 'inside-collection/atoms'

export default {
  name: 'ReferencesList',
  components: {
    BaseText
  },
  props: {
    list: {
      type: Array,
      required: true
    },
    numberToShow: {
      type: Number,
      default: 2
    }
  },
  data() {
    return {
      referencesList: this.formattedList(this.list).reduce((string, ref) => {
        if (string === '') return ref.title

        return `${string}, ${ref.title}`
      }, ''),
      countIndication: this.list.length - this.numberToShow,
      showTooltip: false
    }
  },
  methods: {
    formattedList(list) {
      if (list.length > this.numberToShow) {
        return list.slice(0, 2)
      }

      return list
    },
    setShowTooltip() {
      if (this.countIndication > 0) {
        this.showTooltip = !this.showTooltip
      }
    }
  }
}
</script>

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

.references-list {
  position: relative;

  &--clickable {
    line-height: 1.6;

    @include transition(color 0.4s);

    &:hover {
      color: var(--color-secondary);
    }
  }

  &--tooltip {
    padding: var(--spacing-xs);
    overflow: hidden;
    position: absolute;
    z-index: 20;
    top: 30px;
    left: 0;
    width: 250px;
    background: var(--color-light);

    @include box-shadow(0, 2px, 4px, rgba(var(--color-dark-rgb), 0.3));

    ul {
      max-height: 150px;
      overflow-y: scroll;
      padding: var(--spacing-s) calc(var(--spacing-m) + var(--spacing-xs))
        var(--spacing-s) var(--spacing-s);

      &::-webkit-scrollbar-track {
        background-color: var(--color-grey-100);
      }

      &::-webkit-scrollbar {
        width: 0.6rem;
      }

      &::-webkit-scrollbar-thumb {
        background-color: var(--color-primary);
      }

      li {
        line-height: 2;
      }
    }
  }
}

.inside-radius {
  .references-list--tooltip {
    border-radius: var(--radius-s);

    ul {
      &::-webkit-scrollbar-thumb {
        border-radius: var(--radius-m);
      }

      &::-webkit-scrollbar-track {
        border-radius: var(--radius-m);
      }
    }
  }
}
</style>
