<template>
  <div>
    <div
      v-if="!hideDropdownIcon"
      class="relative -ml-px block sm:hidden sm:shadow-sm"
    >
      <div>
        <button
          @click="showButtons = !showButtons"
          type="button"
          class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10 focus:border-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-600 sm:rounded-md sm:px-3"
          :id="id"
          aria-expanded="false"
          aria-haspopup="true"
        >
          <span class="">{{ buttonObject[0].label }}</span>
          <c-icon
            type="solid"
            name="chevron-down"
            class="ml-2 h-5 w-5"
          ></c-icon>
        </button>
      </div>
      <div
        v-show="showButtons"
        class="absolute z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
        role="menu"
        aria-orientation="vertical"
      >
        <div class="py-1">
          <a
            v-for="button in buttonObject"
            v-bind:key="button.label"
            href="#"
            class="flex px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900"
            role="menuitem"
            :id="getActionIDFn(button.label)"
            @click="buttonAction(button.value)"
            @blur="showButtons = false"
          >
            <div v-if="button.icon == ''" class="h-5"></div>
            <c-icon
              v-if="button.icon"
              :name="button.icon"
              type="solid"
              class="-ml-1 mr-2 h-5 w-5 text-gray-400"
            ></c-icon>
            {{ button.label }}
          </a>
        </div>
      </div>
    </div>
    <div :class="`${buttonClass} ${extraButtonClasses}`">
      <div
        v-for="(button, index) in buttonObject"
        :key="index"
        :class="`relative ${button.parentClasses ? button.parentClasses : ''}`"
      >
        <button
          :key="button.label"
          type="button"
          class="relative h-9 inline-flex items-center border border-gray-300 bg-white py-2 text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
          :class="[
            {
              'rounded-r-md rounded-l-none border-l border-r':
                index == buttonObject.length - 1,
              'rounded-l-md': index == 0,
              'border-r-0': index != buttonObject.length - 1,
              'px-3': button.label,
              'px-2': !button.label && button.icon,
              'cursor-not-allowed opacity-50': button.isDisabled,
            },
            button.classes ? button.classes : '',
          ]"
          :id="getActionIDFn(button.label)"
          @click="handleEvent(button.onClickAction, button.isDisabled)"
          @blur="handleEvent(button.blurAction, button.isDisabled)"
          @mouseover="$emit('hoverState', button, 'over')"
          @mouseleave="$emit('hoverState', button, 'leave')"
        >
          <div v-if="button.icon == ''" class="h-5"></div>
          <c-icon
            v-if="button.isLoading"
            class="mr-2 -ml-1 h-5 w-5"
            name="loader"
          ></c-icon>
          <c-icon
            v-if="button.icon && !button.isLoading"
            :name="button.icon"
            type="solid"
            cursorType="cursor-pointer"
            :class="['h-5 w-5 shrink-0 text-gray-400', button.label ? '-ml-1 mr-2' : '']"
          ></c-icon>
          {{ button.label }}
          <slot></slot>
        </button>
        <slot
          v-if="button.showTooltip"
          name="tooltip"
          :button="button"
          :index="index"
        ></slot>
      </div>
    </div>
  </div>
</template>

<script>
import { getActionID } from "../../helper";
import CIcon from "../CIcon/CIcon.vue";
export default {
  name: "CButtonGroup",
  components: { CIcon },
  props: {
    buttonObject: {
      type: Array,
      required: true,
    },
    hideDropdownIcon: {
      type: Boolean,
      default: false,
    },
    extraButtonClasses: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      showButtons: false,
      buttonClass:
        this.hideDropdownIcon === true
          ? "z-0 relative inline-flex rounded-md block"
          : "z-0 relative inline-flex hidden rounded-md sm:flex",
    };
  },
  methods: {
    getActionIDFn(name) {
      return getActionID(name, this.id);
    },
    handleEvent(function_name, isDisabled) {
      // emulate disabled state
      if (isDisabled) {
        return;
      }
      if (function_name) function_name();
    },
    buttonAction(value) {
      this.$emit("onClick", value);
    },
  },
};
</script>

<style></style>
