<template>
  <div>
    <div class="flex">
      <button
        type="button"
        aria-haspopup="listbox"
        aria-expanded="true"
        aria-labelledby="listbox-label"
        @click="toggleFirstDropdown = !toggleFirstDropdown"
        @blur="close()"
        class="relative inline-flex items-center pl-3 pr-10 py-2 text-left rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 shadow-sm disabled:opacity-50"
        :disabled="isDisabled"
      >
        <span class="block truncate">
          {{ firstDropdownSelectedValue ? firstDropdownSelectedValue : "Select a option" }}
        </span>
        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
          <c-icon name="chevron-down" type="solid" class="h-5 w-5 text-gray-400"></c-icon>
        </span>
      </button>
      <button
        type="button"
        aria-haspopup="listbox"
        aria-expanded="true"
        aria-labelledby="listbox-label"
        @click="toggleSecondDropdown = !toggleSecondDropdown"
        @blur="close()"
        class="relative items-center -ml-px pl-3 pr-10 py-2 text-left rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 shadow-sm disabled:opacity-50"
        :disabled="isDisabled"
      >
        <span class="block truncate">
          {{ secondDropdownSelectedValue ? secondDropdownSelectedValue : "Select a option" }}
        </span>
        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
          <c-icon name="chevron-down" type="solid" class="h-5 w-5 text-gray-400"></c-icon>
        </span>
      </button>
    </div>
    <transition
      enter-active-class="transition ease-out duration-100"
      enter-class="transform opacity-0 scale-95"
      enter-to-class="transform opacity-100 scale-100"
      leave-active-class="transition ease-in duration-75"
      leave-class="transform opacity-100 scale-100"
      leave-to-class="transform opacity-0 scale-95"
    >
      <div
        v-if="toggleFirstDropdown && !isDisabled"
        class="origin-top-right absolute mt-2 -mr-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-gray-900 ring-opacity-5 z-10"
      >
        <ul
          tabindex="-1"
          role="listbox"
          aria-labelledby="listbox-label"
          class="max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
        >
          <li
            v-for="item in firstDropdownOptions"
            v-bind:key="item.items"
            role="menuitem"
            class="text-gray-900 select-none relative px-3 py-2 cursor-pointer"
            @mousedown="handleFirstClick(item)"
          >
            <span class="font-normal block truncate list-options">
              {{ item.text }}
            </span>
          </li>
        </ul>
      </div>
    </transition>
    <transition
      enter-active-class="transition ease-out duration-100"
      enter-class="transform opacity-0 scale-95"
      enter-to-class="transform opacity-100 scale-100"
      leave-active-class="transition ease-in duration-75"
      leave-class="transform opacity-100 scale-100"
      leave-to-class="transform opacity-0 scale-95"
    >
      <div
        v-if="toggleSecondDropdown && !isDisabled"
        class="origin-top-right absolute mt-2 -mr-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-gray-900 ring-opacity-5 z-10"
      >
        <ul
          tabindex="-1"
          role="listbox"
          aria-labelledby="listbox-label"
          class="max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
        >
          <li
            v-for="item in secondDropdownOptions"
            v-bind:key="item.items"
            role="menuitem"
            class="text-gray-900 select-none relative px-3 py-2 cursor-pointer"
            @mousedown="handleSecondClick(item)"
          >
            <span class="font-normal block truncate list-options">
              {{ item.text }}
            </span>
          </li>
        </ul>
      </div>
    </transition>
    <!-- validation error message -->
    <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
      {{ errorMessage }}
    </p>
  </div>
</template>

<script>
import CIcon from "../CIcon/CIcon.vue";
export default {
  name: "CDualSelect",
  components: { CIcon },
  props: {
    // validation is passed or not
    isValidate: { type: Boolean },
    // validation error message
    errorMessage: {
      type: String,
    },
    label: {
      type: String,
      required: true,
    },
    firstDropdownValue: {
      type: String,
    },
    secondDropdownValue: {
      type: String,
    },
    firstDropdownOptions: {
      type: Array,
      required: true,
    },
    secondDropdownOptions: {
      type: Array,
    },
    onChangeFirstOptions: {
      type: Function,
    },
    onChangeSecondOptions: {
      type: Function,
    },
    isDisabled: {
      type: Boolean,
    },
  },
  data() {
    return {
      toggleFirstDropdown: false,
      toggleSecondDropdown: false,
      firstDropdownSelectedValue: this.firstDropdownValue ? this.firstDropdownValue : "",
      secondDropdownSelectedValue: this.secondDropdownValue ? this.secondDropdownValue : "",
    };
  },
  methods: {
    close() {
      this.toggleFirstDropdown = false;
      this.toggleSecondDropdown = false;
    },
    handleFirstClick(item) {
      this.firstDropdownSelectedValue = item.text;
      this.$emit("onChangeFirstOptions", item);
    },
    handleSecondClick(item) {
      this.secondDropdownSelectedValue = item.text;
      this.$emit("onChangeSecondOptions", item);
    },
  },
  computed: {
    classes() {
      return {
        "text-gray-700 border-gray-300 hover:bg-gray-50 focus:ring-indigo-600":
          this.type == "secondary",
        "text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
          this.type == "primary",
        "text-white hover:bg-red-800 bg-red-700 focus:ring-red-600": this.type == "danger",
        "text-white hover:bg-green-800 bg-green-700 focus:ring-green-600": this.type == "success",
        "cursor-default pointer-events-none": this.isLoading,
      };
    },
  },
  watch: {
    firstDropdownValue() {
      this.firstDropdownSelectedValue = this.firstDropdownValue;
      this.secondDropdownSelectedValue = this.secondDropdownValue;
    },
  },
};
</script>

<style></style>
