<template>
  <div>
    <!-- adding class on div when label is present to prevent shrink of avatar -->
    <div
      :class="[
        description ? 'items-start' : 'items-center',
        hasLabel ? `${classes} shrink-0` : '',
      ]"
      class="flex"
    >
      <div v-if="image" class="relative">
        <img
          @error="$emit('error', $event)"
          :class="[
            classes,
            imageClasses,
            imageResizeClass,
            hasRing ? `p-1 ring-2 ${getRingColor}` : '',
          ]"
          class="inline-block"
          loading="lazy"
          :src="image"
          :alt="name || 'Avatar'"
        />
        <div
          class="absolute left-1/2 -mt-3 -translate-x-1/2 rounded-md"
          :class="labelDetails.parentClass"
          v-if="hasLabel"
        >
          <span
            v-if="labelDetails.type == 'text'"
            :class="labelDetails.textClass"
            >{{ labelDetails.text }}</span
          ><c-icon
            v-else
            :type="labelDetails.icon.type"
            :name="labelDetails.icon.name"
            :class="
              labelDetails.icon.class
                ? labelDetails.icon.class
                : `h-5 w-5 text-gray-400`
            "
            :viewBox="
              labelDetails.icon.viewBox
                ? labelDetails.icon.viewBox
                : '0 0 20 20'
            "
          ></c-icon>
        </div>
      </div>
      <div
        v-else
        :class="
          hasRing
            ? `${getRingColor} relative flex h-12 w-12 items-center justify-center justify-items-center rounded-full ring-2`
            : ''
        "
      >
        <div
          :class="[
            'flex-none text-center font-medium',
            hasRing
              ? 'flex h-10 w-10 items-center justify-center rounded-full text-sm'
              : nameInitialsClasses,
            `border-${isDynamicallyColored ? customColor : 'red'}-300`,
            `bg-${isDynamicallyColored ? customColor : 'red'}-100`,
            `text-${isDynamicallyColored ? customColor : 'red'}-600`,
            hasLabel && !hasRing
              ? 'relative flex items-center justify-center'
              : '',
          ]"
          :style="[
            size == 'medium' && !hasLabel ? { 'line-height': '3rem' } : '',
            size == 'large' && !hasLabel ? { 'line-height': '3.5rem' } : '',
            size == 'very large' && !hasLabel ? { 'line-height': '6rem' } : '',
            size == 'very very large' && !hasLabel
              ? { 'line-height': '8rem' }
              : '',
            size == 'extrasmall' && !hasLabel ? { 'font-size': '0.7rem' } : '',
            size == 'extraextrasmall' && !hasLabel
              ? { 'font-size': '0.5rem' }
              : '',
            size == 'extraextraextrasmall' && !hasLabel
              ? { 'font-size': '0.5rem' }
              : '',
          ]"
          :title="name || nameInitials"
     
        >
          {{ nameInitials }}
          <div
            v-if="hasLabel"
            class="absolute bottom-0 left-1/2 z-10 -translate-x-1/2 translate-y-1/2 whitespace-nowrap rounded-md"
            :class="labelDetails.parentClass"
          >
            <span
              v-if="labelDetails.type == 'text'"
              :class="labelDetails.textClass"
              >{{ labelDetails.text }}</span
            ><c-icon
              v-else
              :type="labelDetails.icon.type"
              :name="labelDetails.icon.name"
              :class="
                labelDetails.icon.class
                  ? labelDetails.icon.class
                  : `h-5 w-5 text-gray-400`
              "
              :viewBox="
                labelDetails.icon.viewBox
                  ? labelDetails.icon.viewBox
                  : '0 0 20 20'
              "
            ></c-icon>
          </div>
        </div>
      </div>
      <div class="ml-3 text-left" v-if="name">
        <p v-if="name" class="text-sm text-gray-900">
          {{ name }}
        </p>
        <p
          v-if="description"
          class="text-xs text-gray-500 group-hover:text-gray-700"
        >
          {{ description }}
        </p>
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script>
import CIcon from "../CIcon/CIcon.vue";
export default {
  name: "CAvatar",
  components: {
    CIcon,
  },
  props: {
    size: {
      type: String,
      required: true,
      default: "medium",
    },
    image: {
      type: String,
    },
    nameInitials: {
      type: String,
    },
    rounded: { type: Boolean },
    name: { type: String },
    description: { type: String },
    imageClasses: { type: String },
    isDynamicallyColored: { type: Boolean, default: false },
    hasRing: { type: Boolean, default: false },
    ringColor: { type: String, default: "gray" },
    hasLabel: { type: Boolean, default: false },
    labelDetails: { type: Object, default: null },
    imageResizeClass: {
      type: String,
      default: "object-cover",
    },
  },
  data() {
    return {
      colors: ["gray", "red", "yellow", "indigo", "pink", "purple", "green"],
      customColor: null,
    };
  },
  computed: {
    classes() {
      return {
        "h-5 w-5": this.size == "extraextraextrasmall",
        "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",
        "h-32 w-32": this.size == "very very large",
        "rounded-full": this.rounded == true,
        "rounded-md": this.rounded == false,
      };
    },

    nameInitialsClasses() {
      return {
        "h-5 w-5 leading-5": this.size == "extraextraextrasmall",
        "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",
        "h-32 w-32 text-3xl": this.size == "very very large",
        "rounded-full": this.rounded == true,
        "rounded-md": this.rounded == false,
      };
    },
    getRingColor() {
      if (this.ringColor == "yellow") {
        return "ring-[#facc15]";
      } else if (this.ringColor == "indigo") {
        return "ring-indigo-400";
      } else if (this.ringColor == "red") {
        return "ring-red-600";
      } else {
        return "ring-gray-400";
      }
    },
  },
  methods: {
    setColors() {
      this.colors = this.colors.sort(() => Math.random() - 0.5);
      let show = this.colors[Math.floor(Math.random() * this.colors.length)];
      this.customColor = show;
    },
  },
  mounted() {
    this.setColors();
  },
};
</script>
