<template>
  <div>
    <span class="relative inline-flex rounded-md shadow-sm">
      <button
        :type="type"
        @click="handleButtonClick"
        :class="[classes, isDisabled ? 'opacity-50' : '']"
        class="relative h-9 inline-flex items-center rounded-l-md px-3 py-2 text-sm font-medium focus:z-10 focus:outline-none focus:ring-1"
        :disabled="isDisabled"
        :id="id"
      >
        <c-icon v-if="isLoading" class="mr-2 h-4 w-4" name="loader"></c-icon>
        {{ selectedValue ? selectedValue : label }}
      </button>
      <span class="relative -ml-px block">
        <button
          @click="toggleDropdown = !toggleDropdown"
          @blur="close()"
          :type="type"
          :class="[
            classes,
            isDisabled || isDropdownDisabled ? 'opacity-50' : '',
          ]"
          class="relative h-9 inline-flex items-center rounded-r-md px-2 py-2 text-sm font-medium focus:z-10 focus:outline-none focus:ring-1"
          :disabled="isDisabled || isDropdownDisabled"
          :id="id + '_button_dropdown'"
        >
          <span class="sr-only">Open options</span>
          <c-icon name="chevron-down" type="solid" class="h-5 w-5"></c-icon>
        </button>
        <div
          v-if="toggleDropdown"
          :class="dropdownPositionClass"
          class="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-gray-900 ring-opacity-5"
        >
          <div
            class="py-1"
            role="menu"
            aria-orientation="vertical"
            aria-labelledby="option-menu"
          >
            <li
              v-for="item in items"
              v-bind:key="item.items"
              @mousedown="selectOption($event, item.value)"
              class="block cursor-pointer px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
              role="menuitem"
              :id="getActionIDFn(item.secondaryText)"
            >
              {{ item.text }}
            </li>
          </div>
        </div>
      </span>
    </span>
  </div>
</template>

<script>
import { getActionID } from "../../helper";
import CIcon from "../CIcon/CIcon.vue";
export default {
  name: "CButtonWithDropdown",
  components: { CIcon },
  props: {
    label: {
      type: String,
      required: true,
    },
    id: {
      type: String,
    },
    type: {
      type: String,
      default: "secondary",
    },
    value: {
      type: String,
    },
    items: {
      type: Array,
      required: true,
    },
    dropdownPositionClass: {
      type: String,
    },
    isLoading: {
      type: Boolean,
      default: false,
    },
    isDisabled: {
      type: Boolean,
      default: false,
    },
    isDropdownDisabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      toggleDropdown: false,
      isSelected: false,
      selectedValue: this.value,
    };
  },

  computed: {
    classes() {
      return {
        "border text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
          this.type == "primary",
        "border text-gray-700 border-gray-300 hover:bg-gray-50 focus:ring-indigo-600":
          this.type == "secondary",
        "border text-white hover:bg-green-800 bg-green-700 focus:ring-green-600":
          this.type == "success",
        "border text-white hover:bg-red-800 bg-red-700 focus:ring-red-600":
          this.type == "danger",
        "border border-green-800 bg-green-100 text-green-800 hover:bg-green-200 focus:ring-green-200":
          this.type == "light-green",
        "border border-red-800 bg-red-100 text-red-800 hover:bg-red-200 focus:ring-red-200":
          this.type == "light-red",
        "cursor-default pointer-events-none": this.isLoading,
      };
    },
  },
  methods: {
    getActionIDFn(name) {
      return getActionID(name, this.id);
    },
    selectOption(event, value) {
      this.selectedValue = event.target.innerText;
      this.$emit("onSelectOption", value);
      this.toggleDropdown = false;
      this.isSelected = true;
    },
    close() {
      this.toggleDropdown = false;
    },
    handleButtonClick() {
      this.$emit("action", this.selectedValue);
    },
  },
  watch: {
    value() {
      this.selectedValue = this.value;
    },
  },
};
</script>

<style></style>
