<template>
  <div class="formatted-references">
    <BaseText
      :class="{
        'formatted-references--clickable':
          listData.length > limit && !disableClick
      }"
      @click="setShowDetail"
    >
      {{ getFormattedReferences(getSortedList, 2) }}
    </BaseText>

    <transition name="fadeIn">
      <div
        v-if="showDetail && listData.length > limit"
        class="formatted-references--detail"
      >
        <ul>
          <li v-for="item in getSortedList" :key="item.uuid">
            {{ item.title }}
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>

<script>
import sortBy from 'lodash/sortBy'

import { BaseText } from 'inside-collection/atoms'

export default {
  name: 'FormattedReferences',
  components: {
    BaseText
  },
  props: {
    /*
     * Allow to disable click event to not show listing
     */
    disableClick: {
      type: Boolean,
      default: false
    },
    /*
     * Data to list
     */
    listData: {
      type: Array,
      required: true
    },
    /*
     * total
     */
    total: {
      type: Number
    },
    /*
     * Truncate limit
     */
    limit: {
      type: Number,
      default: 4
    }
  },
  data() {
    return {
      showDetail: false
    }
  },
  computed: {
    getSortedList() {
      return sortBy(this.listData, 'title')
    }
  },
  methods: {
    /*
     * Return the truncate list with the right text
     * @param {Array} references
     * @return {String}
     */
    getFormattedReferences(references) {
      if (!references[0]) return this.$_tr('customs.FORMATTED_REFERENCES.empty')

      if (references.length === this.total) {
        return this.$_tr('customs.FORMATTED_REFERENCES.all')
      } else {
        return this.formatReferences(references, this.limit)
      }
    },
    /*
     * Return formatted string, after loop on all data
     * @param {Array} references
     * @return {String}
     */
    formatReferences(references) {
      if (references.length <= this.limit) {
        let arr = []
        references.forEach(ref => {
          arr.push(ref.title)
        })

        return arr.join(', ')
      } else {
        let arr = []

        for (let i = 0; i < this.limit; i++) {
          arr.push(references[i].title)
        }

        const difference = references.length - this.limit
        return `${arr.join(', ')} + ${difference}`
      }
    },
    /*
     * Set the state of the detail listing
     */
    setShowDetail() {
      if (this.listData.length > this.limit && !this.disableClick) {
        this.showDetail = !this.showDetail
      }
    }
  }
}
</script>

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

.formatted-references {
  position: relative;
  cursor: default;

  &--clickable {
    cursor: pointer;
    line-height: 1.6;

    @include transition(color 0.4s);

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

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

    @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-text);
      }

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

.inside-radius {
  .formatted-references--detail {
    border-radius: var(--radius-s);

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

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