<template>
  <div>
    <slot></slot>
    <div
      :class="`${isDropDownRelative ? 'relative' : ''} inline-block text-left`"
    >
      <div>
        <button
          type="white"
          @click.stop="toggle($event)"
          @blur="close()"
          :class="
            customClasses
              ? iconClasses
              : 'inline-flex w-full justify-center rounded-full border-none p-2 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2'
          "
          :id="id"
          aria-haspopup="true"
          aria-expanded="true"
        >
          <div class="flex items-center gap-1">
            <c-icon
              :name="icon.name"
              :type="icon.type"
              :class="icon.class"
              :cursorType="cursorType"
              :viewBox="icon.viewBox"
            ></c-icon>
            <p v-if="label" :class="['text-sm text-gray-500', labelClass]">
              {{ label }}
            </p>
          </div>
        </button>
      </div>
      <div
        v-show="toggleDropdown"
        :class="classes"
        class="absolute z-10 mt-2 -mr-1 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-gray-900 ring-opacity-5"
      >
        <div
          class="w-max py-1"
          role="menu"
          aria-orientation="vertical"
          aria-labelledby="option-menu"
        >
          <div
            v-for="(item, index) in items"
            v-bind:key="item.text"
            @mouseenter="showTooltipIndex = index"
            @mouseleave="showTooltipIndex = null"
          >
            <a
              @mousedown.stop.prevent="dropdownAction(item)"
              class="flex cursor-pointer justify-between px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 disabled:pointer-events-none disabled:opacity-50"
              :class="[
                item.class,
                item.disabled ? 'pointer-events-none opacity-50' : '',
                item.isLoading ? 'pointer-events-none cursor-default' : '',
              ]"
              :id="getActionIDFn(item.text)"
              role="menuitem"
              :disabled="item.disabled"
              :aria-disabled="item.disabled ? 'true' : 'false'"
            >
              <div class="flex items-center">
                <c-icon
                  v-if="item.isLoading"
                  :class="dropdownIcons[index].class"
                  name="loader"
                ></c-icon>

                <c-icon
                  v-if="item.icon && !item.isLoading"
                  :name="dropdownIcons[index].name"
                  :type="dropdownIcons[index].type"
                  :class="dropdownIcons[index].class"
                  :viewBox="dropdownIcons[index].viewBox"
                  :cursorType="cursorType"
                ></c-icon>

                <div class="flex items-center gap-1">
                  {{ item.text }}
                  <c-icon
                    v-if="item.shouldShowHoverIcon && !item.isLoading"
                    :name="item.hoverIcon.name"
                    :type="item.hoverIcon.type"
                    :class="[
                      item.hoverIcon.class,
                      'invisible group-hover:visible',
                    ]"
                    :viewBox="item.hoverIcon.viewBox"
                    :cursorType="cursorType"
                  ></c-icon>
                </div>
              </div>
              <slot v-if="item.name" :name="item.name"></slot>
            </a>
            <c-tooltip
              v-if="item.tooltip && item.tooltip.text && showTooltipIndex === index"
              :tooltipText="item.tooltip.text"
              :isTopAligned="true"
              :classes="item.tooltip.classes"
              :color="item.tooltip.color"
            ></c-tooltip>
            <hr v-if="item.border" class="my-1" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getActionID } from "../../helper";
import CIcon from "../CIcon/CIcon.vue";
import CTooltip from "../CToolTip/CToolTip.vue";

export default {
  name: "CIconDropdown",
  components: { CIcon, CTooltip },
  props: {
    id: {
      type: String,
    },
    label: {
      type: String,
    },
    labelClass: {
      type: String,
    },
    items: {
      type: Array,
      required: true,
    },
    customClasses: {
      type: Boolean,
      default: false,
    },
    iconClasses: {
      type: String,
    },
    icon: {
      type: Object,
    },
    dropdownIcons: {
      type: Array,
    },
    classes: {
      type: String,
    },
    action: {
      type: Function,
    },
    isDropDownRelative: {
      type: Boolean,
      default: true,
    },
    cursorType: {
      type: String,
      default: "cursor-pointer",
    },
  },
  data() {
    return {
      toggleDropdown: false,
      showTooltipIndex: null,
    };
  },
  methods: {
    getActionIDFn(name) {
      return getActionID(name, this.id);
    },
    toggle(event) {
      this.toggleDropdown = !this.toggleDropdown;
      if (event.target.tagName == "path") {
        if (this.toggleDropdown) {
          event.target.parentElement.parentElement.parentElement.parentElement.focus();
        } else {
          event.target.parentElement.parentElement.parentElement.parentElement.blur();
        }
      } else if (event.target.tagName == "svg") {
        if (this.toggleDropdown) {
          event.target.parentElement.parentElement.parentElement.focus();
        } else {
          event.target.parentElement.parentElement.parentElement.blur();
        }
      } else {
        if (this.toggleDropdown) {
          event.target.focus();
        } else {
          event.target.blur();
        }
      }
    },
    dropdownAction(item) {
      this.$emit("action", item);
      this.close();
    },
    close() {
      this.toggleDropdown = false;
    },
  },
};
</script>

<style></style>
