<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
              : 'icon-select-button inline-flex w-full justify-center rounded-full border-none p-2 hover:bg-gray-100'
          "
          :style="computedStyles"
          aria-haspopup="true"
          aria-expanded="true"
        >
          <div>
            <c-icon
              :name="icon.name"
              :type="icon.type"
              :class="icon.class"
              :cursorType="cursorType"
              :viewBox="icon.viewBox"
            ></c-icon>
          </div>
        </button>
      </div>

      <div
        v-show="toggleDropdown"
        @mouseenter="toggle($event)"
        @mouseleave="close()"
        :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">
            <a
              @mousedown.stop.prevent="dropdownAction(item)"
              @touchend="dropdownAction(item)"
              class="flex cursor-pointer 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"
              role="menuitem"
              :disabled="item.disabled"
            >
              <c-icon
                v-if="item.icon"
                :name="dropdownIcons[index].name"
                :type="dropdownIcons[index].type"
                :class="dropdownIcons[index].class"
                :viewBox="dropdownIcons[index].viewBox"
                :cursorType="cursorType"
              ></c-icon>
              {{ item.text }}
              <p
                v-if="selectedOption != null && selectedOption == item.text"
                class="flex flex-1 items-center justify-end"
              >
                <c-icon
                  name="check-outline-v2"
                  type="outline-v2"
                  class="h-5 w-5 text-gray-400"
                >
                </c-icon>
              </p>
            </a>
            <hr v-if="item.border" class="my-1" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CIcon from "../CIcon/CIcon.vue";
import { COLOR_CONFIG } from "../../colorConfig";
export default {
  name: "CIconSelect",
  components: { CIcon },
  props: {
    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",
    },
    selectedOption: {
      type: String,
      default: null,
    },
    preferredColor: {
      type: String,
      default: "indigo",
    },
  },
  data() {
    return {
      toggleDropdown: false,
    };
  },
  computed: {
    computedStyles() {
      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
      return {
        "--primary-ring-color": colors.shade600,
      };
    },
  },
  methods: {
    toggle(event) {
      this.toggleDropdown = true;
      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);
    },
    close() {
      this.toggleDropdown = false;
    },
  },
};
</script>

<style scoped>
.icon-select-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--primary-ring-color) !important;
}
</style>
