<template>
  <div>
    <div class="flex items-center justify-between" v-if="title">
      <h3 class="text-lg font-medium leading-6 text-gray-900">
        {{ title.heading }}
      </h3>
      <c-tag
        v-if="title.label"
        class="hidden sm:block"
        :label="title.label"
        color="green"
      ></c-tag>
    </div>
    <dl class="mt-4 grid grid-cols-1 gap-6" :class="dynamicGridSize">
      <div
        :class="['pt-3', showStatsBorder ? 'border-t border-gray-200' : '']"
        v-for="(count, statIndex) in statsCount"
        :key="statIndex"
      >
        <div
          class="leading-6 md:flex-col md:items-start md:justify-center lg:flex-row lg:items-end lg:justify-between"
        >
          <div>
            <dt class="flex text-sm font-normal leading-5 text-gray-900">
              <span
                class="overflow-hidden overflow-ellipsis whitespace-nowrap"
                >{{ count.label }}</span
              >
              <span v-if="count.number" class="ml-1 text-sm text-gray-500"
                >({{ count.number }})</span
              >
              <span v-if="count.suffix" class="ml-1 text-sm text-gray-500"
                >({{ count.suffix }})</span
              >

              <span
                v-if="count.icon && count.toolTip"
                class="relative ml-2 inline-flex shrink-0 items-center self-center"
              >
                <c-tool-tip
                  v-if="
                    count.toolTip.showToolTip || hoveredStatIndex === statIndex
                  "
                  color="#1f2937"
                  :classes="tooltipClasses(count)"
                  :tooltip-text="count.toolTip.text"
                  :isTopAligned="true"
                ></c-tool-tip>
                <c-icon
                  :name="count.icon.name"
                  :type="count.icon.type"
                  :class="count.icon.class"
                  :cursorType="count.icon.cursorType"
                  @mouseover.native="hoveredStatIndex = statIndex"
                  @mouseleave.native="hoveredStatIndex = null"
                ></c-icon>
              </span>
              <c-icon
                v-else-if="
                  count.icon != undefined &&
                  count.icon != null &&
                  !count.toolTip
                "
                :name="count.icon.name"
                :type="count.icon.type"
                :class="count.icon.class"
                :cursorType="count.icon.cursorType"
              ></c-icon>
            </dt>
            <div class="mt-2 flex items-baseline justify-start">
              <p
                v-if="count.useNonAnimatedDisplay"
                class="text-2xl font-semibold"
              >
                <span>{{ count.totalCount }}</span>
              </p>
              <p :class="`text-2xl font-semibold ${fontColor}`" v-else>
                <number-animator :value="count.totalCount" />
              </p>
              <p
                class="text-xs font-normal text-gray-900"
                v-if="count.denominator"
              >
                /{{ count.denominator }}
              </p>
            </div>
          </div>
          <div class="mt-3 flex items-center">
            <c-tag
              v-if="count.tag"
              :icon="count.tag.icon"
              :label="count.tag.label"
              :color="count.tag.color"
              tagClasses="rounded-full text-xs"
            ></c-tag>
            <label
              v-if="count.days"
              :class="`ml-1 text-sm font-normal leading-5 text-gray-500 ${count.daysClass}`"
              >{{ count.days }}</label
            >
          </div>
        </div>
      </div>
    </dl>
  </div>
</template>

<script>
import CTag from "../CTag/CTag.vue";
import CIcon from "../CIcon/CIcon.vue";
import CToolTip from "../CToolTip/CToolTip.vue";
import NumberAnimator from "../NumberAnimator.vue";
export default {
  name: "CStats",
  components: { CTag, CIcon, CToolTip, NumberAnimator },
  props: {
    statsCount: {
      type: Array,
    },
    title: {
      type: Object,
    },
    fontColor: {
      type: String,
      default: "text-gray-900",
    },
    colorClasses: {
      type: Object,
    },
    dynamicGridSize: {
      type: String,
      default: "md:grid-cols-3",
    },
    showStatsBorder: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      hoveredStatIndex: null,
    };
  },
  methods: {
    tooltipClasses(count) {
      const base =
        "block bottom-full left-1/2 mb-1 -translate-x-1/2 text-white font-normal bg-gray-800";
      if (count.toolTip.classes) {
        return `${base} ${count.toolTip.classes}`;
      }
      return `${base} whitespace-nowrap`;
    },
  },
};
</script>

<style></style>
