<template>
  <div>
    <slot></slot>
    <div
      :class="[isDisabled ? 'opacity-50' : '', buttonWrapperClass]"
      class="relative inline-block text-left"
    >
      <button
        :type="type"
        @click="toggleDropdown = !toggleDropdown"
        @blur="close()"
        class="h-9 inline-flex w-full justify-center px-3 py-2 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2"
        :class="[classes, buttonClass]"
        aria-haspopup="listbox"
        aria-expanded="true"
        aria-labelledby="listbox-label"
        :disabled="isDisabled"
        :id="id"
      >
        <c-icon
          v-if="icon"
          :name="icon.name"
          :type="icon.type"
          :class="icon.class"
          :cursorType="icon.cursorType"
          :viewBox="icon.viewBox || '0 0 20 20'"
        ></c-icon>
        <c-icon v-if="isLoading" class="mr-2 h-5 w-5" name="loader"></c-icon>
        {{ label }}
        <c-icon
          name="chevron-down"
          type="solid"
          :class="['ml-2 h-5 w-5', iconClass]"
        ></c-icon>
      </button>

      <div
        v-if="toggleDropdown"
        :class="dropdownPositionClass"
        class="absolute z-10 mt-2 -mr-1 w-56 rounded-md bg-white pb-4"
        ref="dropdownMenu"
      >
        <div class="rounded-md shadow-lg ring-1 ring-gray-900 ring-opacity-5">
          <ul
            class="py-1"
            tabindex="-1"
            role="listbox"
            aria-labelledby="listbox-label"
          >
            <!-- item.isDisabled will make the list item unclickable and reduce the opacity -->
            <li
              v-for="item in items"
              :key="item.text"
              :class="[
                item.isDisabled ? 'pointer-events-none opacity-50 ' : '',
              ]"
              :id="getActionIDFn(item.text)"
              class="flex cursor-pointer px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
              @mousedown="emitOptionAction(item.action)"
            >
              <c-icon
                v-if="item.icon"
                :type="item.iconType"
                :class="['mr-2 h-5 w-5 text-gray-400', item.iconClass]"
                :name="item.icon"
                :viewBox="item.iconViewBox || '0 0 24 24'"
              ></c-icon>
              <slot name="customIcon" v-if="item.customIcon"></slot>
              {{ item.text }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getActionID } from "../../helper";
import CIcon from "../CIcon/CIcon.vue";
export default {
  name: "CButtonSelect",
  components: { CIcon },
  props: {
    label: {
      type: String,
      required: true,
    },
    id: {
      type: String,
    },
    type: {
      type: String,
      default: "primary",
    },
    items: {
      type: Array,
      required: true,
    },
    isLoading: {
      type: Boolean,
      default: false,
    },
    dropdownPositionClass: {
      type: String,
    },
    isDisabled: {
      type: Boolean,
      default: false,
    },
    buttonWrapperClass: {
      type: String,
      default: "",
    },
    buttonClass: {
      type: String,
      default: "",
    },
    iconClass: {
      type: String,
      default: "",
    },
    icon: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      toggleDropdown: false,
    };
  },

  computed: {
    classes() {
      return {
        "text-gray-700 border-gray-300 rounded-md hover:bg-gray-50 focus:ring-indigo-600":
          this.type == "secondary",
        "text-white  rounded-md hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
          this.type == "primary",
        "text-white rounded-md  hover:bg-red-800 bg-red-700 focus:ring-red-600":
          this.type == "danger",
        "text-white  rounded-md hover:bg-green-800 bg-green-700 focus:ring-green-600":
          this.type == "success",
        "text-gray-700 border-gray-300 rounded-md hover:bg-gray-50 focus:ring-indigo-600 bg-white":
          this.type == "white",
        "bg-gray-900 text-white hover:bg-gray-800 rounded-md focus:ring-gray-700":
          this.type == "dark-blue",
        "cursor-default rounded-md pointer-events-none": this.isLoading,
        //the type-white property contains the class rounded-r-md that would only round the button corner in the right direction
        //while the other type property will round the button corners for all 4 direction
        "text-gray-700 border-gray-300 rounded-r-md hover:bg-gray-50 focus:ring-indigo-600 bg-white":
          this.type == "white-rounded-right",
        "text-gray-700 border bg-white border-gray-300 rounded-md hover:bg-gray-50 focus:ring-indigo-600":
          this.type == "white",
      };
    },
  },
  methods: {
    getActionIDFn(name) {
      return getActionID(name, this.id);
    },
    emitOptionAction(action) {
      this.$emit("buttonActions", action);
    },
    close() {
      this.toggleDropdown = false;
    },
  },
  watch: {
    toggleDropdown(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          if (this.$refs.dropdownMenu) {
            this.$refs.dropdownMenu.scrollIntoView({
              block: "nearest",
            });
          }
        });
      }
    },
  },
};
</script>

<style></style>
