<template>
  <div :class="description ? 'items-start' : 'items-center'" class="flex">
    <div class="flex -space-x-1" v-if="images && images.length <= 3">
      <img
        v-for="(image, index) in images"
        :key="index"
        :class="classes"
        class="inline-block ring-2 ring-white"
        :src="image.image"
        alt=""
      />
    </div>
    <div class="flex -space-x-1" v-if="images && images.length > 3">
      <img
        v-for="(image, index) in images.slice(0, 4)"
        :key="index"
        :class="classes"
        class="inline-block ring-2 ring-white"
        :src="image.image"
        alt=""
      />
    </div>
    <div class="flex -space-x-1" v-if="nameInitials && nameInitialsWithColors.length > 4">
      <template v-for="(name, index) in nameInitialsWithColors.slice(0, 4)">
        <div
        :key="index"
        :class="[nameInitialsClasses, 'relative']"
        @mouseover="handleMouseOver(index)"
        @mouseleave="handleMouseLeave"
        >
          <c-tool-tip
            v-if="showTooltipOnHover && hoveredIndex === index"
            :tooltipText="name.fullName"
            :isTopAligned="true"
            color="#1f2937"
            classes="absolute left-1/2 -translate-x-1/2 -mt-12 text-white bg-gray-800 w-max"
          ></c-tool-tip>
          <img
            v-if="showImageWithInitials && (name.image || name.image_240)"
            :class="[
              'w-full h-full object-cover',
              rounded ? 'rounded-full' : 'rounded-md'
            ]"
            :src="name.image || name.image_240"
            :alt="'Profile picture of ' + name.fullName"
          />
          <div
            v-else
            :class="[
              'w-full h-full inline-block text-center font-medium ring-2 ring-white',
              'bg-' + name.color + '-100',
              'border-' + name.color + '-300',
              ,
              'text-' + name.color + '-600',
              rounded ? 'rounded-full' : 'rounded-md'
            ]"
            :style="[
              size == 'medium' ? { 'line-height': '3rem' } : '',
              size == 'large' ? { 'line-height': '3.5rem' } : '',
              size == 'very large' ? { 'line-height': '6rem' } : '',
              size == 'extraextrasmall' ? { 'font-size': '0.5rem' } : '',
              size == 'extrasmall' ? { 'font-size': '0.7rem' } : '',
            ]"
          >
            {{ name.initials }}
          </div>
        </div>
      </template>
    </div>
    <div class="flex -space-x-1" v-if="nameInitials && nameInitialsWithColors.length <= 4">
      <template v-for="(name, index) in nameInitialsWithColors">
        <div
        :key="index"
        :class="[nameInitialsClasses, 'relative']"
        @mouseover="handleMouseOver(index)"
        @mouseleave="handleMouseLeave"
        >
          <c-tool-tip
            v-if="showTooltipOnHover && hoveredIndex === index"
            :tooltipText="name.fullName"
            :isTopAligned="true"
            color="#1f2937"
            classes="absolute left-1/2 -translate-x-1/2 -mt-12 text-white bg-gray-800 w-max"
          ></c-tool-tip>
          <img
            v-if="showImageWithInitials && (name.image || name.image_240)"
            :class="[
              'w-full h-full object-cover',
              rounded ? 'rounded-full' : 'rounded-md'
            ]"
            :src="name.image || name.image_240"
            :alt="'Profile picture of ' + name.fullName"
          />
          <div
          v-else
          :class="[
            'w-full h-full inline-block text-center font-medium ring-2 ring-white',
            'bg-' + name.color + '-100',
            'border-' + name.color + '-300',
            ,
            'text-' + name.color + '-600',
            rounded ? 'rounded-full' : 'rounded-md'
          ]"
          :style="[
            size == 'medium' ? { 'line-height': '3rem' } : '',
            size == 'large' ? { 'line-height': '3.5rem' } : '',
            size == 'very large' ? { 'line-height': '6rem' } : '',
            size == 'extraextrasmall' ? { 'font-size': '0.5rem' } : '',
            size == 'extrasmall' ? { 'font-size': '0.7rem' } : '',
          ]"
        >
          {{ name.initials }}
          </div>
        </div>
      </template>
    </div>
    <div class="ml-3 text-left" v-if="name">
      <p v-if="name" class="text-sm text-gray-500">
        {{ name }}
      </p>
      <p v-if="description" class="text-xs text-gray-500 group-hover:text-gray-700">
        {{ description }}
      </p>
      <slot></slot>
    </div>
  </div>
</template>
<script>
import CToolTip from '../CToolTip/CToolTip.vue';
export default {
  components: { CToolTip },
  name: "CAvatarGroup",
  props: {
    size: {
      type: String,
      required: true,
      default: "medium",
    },
    images: {
      type: Array,
    },
    nameInitials: {
      type: Array,
    },
    rounded: { type: Boolean },
    name: { type: String },
    description: { type: String },
    showTooltipOnHover: {
      type: Boolean,
      default: false,
    },
    showImageWithInitials: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      colors: ["gray", "red", "yellow", "indigo", "pink", "purple", "green"],
      hoveredIndex: null,
    };
  },
  computed: {
    classes() {
      return {
        "h-6 w-6": this.size == "extraextrasmall",
        "h-8 w-8": this.size == "extrasmall",
        "h-10 w-10": this.size == "small",
        "h-12 w-12": this.size == "medium",
        "h-14 w-14": this.size == "large",
        "h-24 w-24": this.size == "very large",
        "rounded-full": this.rounded == true,
        "rounded-md": this.rounded == false,
      };
    },
    nameInitialsClasses() {
      return {
        "h-6 w-6 leading-6": this.size == "extraextrasmall",
        "h-8 w-8 leading-8": this.size == "extrasmall",
        "h-10 w-10 leading-10 text-xs": this.size == "small",
        "h-12 w-12 text-sm": this.size == "medium",
        "h-14 w-14 text-base": this.size == "large",
        "h-24 w-24 text-2xl": this.size == "very large"
      };
    },
    nameInitialsWithColors() {
      let nameWithColors = this.nameInitials;
      nameWithColors.map((name) => {
        name.color = this.setColors();
        name.fullName = name.surname ? `${name.firstName} ${name.surname}` : name.firstName
      });
      return nameWithColors;
    },
  },
  methods: {
    setColors() {
      this.colors = this.colors.sort(() => Math.random() - 0.5);
      let show = this.colors[Math.floor(Math.random() * this.colors.length)];
      return show;
    },
    handleMouseOver(index) {
    if (this.showTooltipOnHover) {
      this.hoveredIndex = index;
    }
  },
  handleMouseLeave() {
    if (this.showTooltipOnHover) {
      this.hoveredIndex = null;
    }
  },
  },
};
</script>
