<template>
  <div class="inline-flex rounded-md shadow-sm">
    <!-- Primary action button -->
    <button
      type="button"
      class="py-2 px-3 sm:px-4 text-sm font-semibold text-white transition focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 rounded-l-md"
      :disabled="cms.isProcessing"
      @click="cms.performAction(cms.mainAction.id)"
    >
      <span
        v-if="cms.isProcessing && cms.currentActionId === cms.mainAction.id"
        class="flex items-center"
      >
        <font-awesome-icon :icon="['fas', 'spinner']" spin class="mr-2" />
        Processing...
      </span>
      <span v-else>
        {{ cms.mainAction.label }}
      </span>
    </button>

    <!-- Dropdown toggle + menu -->
    <Menu as="div" class="relative">
      <MenuButton
        class="inline-flex items-center justify-center px-2 sm:px-2.5 py-2 text-white transition focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 rounded-r-md border-l border-indigo-700 dark:border-indigo-600"
      >
        <span class="sr-only">Open options</span>
        <ChevronDownIcon class="h-5 w-5" aria-hidden="true" />
      </MenuButton>

      <Transition
        enter="transition ease-out duration-100"
        enter-from="transform opacity-0 scale-95"
        enter-to="transform opacity-100 scale-100"
        leave="transition ease-in duration-75"
        leave-from="transform opacity-100 scale-100"
        leave-to="transform opacity-0 scale-95"
      >
        <MenuItems
          class="absolute right-0 z-10 mt-2.5 w-56 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 dark:ring-gray-700"
        >
          <MenuItem
            v-for="action in cms.dropdownActions"
            :key="action.id"
            v-slot="{ active }"
          >
            <button
              class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
              :class="{
                'opacity-50 cursor-wait':
                  cms.isProcessing && cms.currentActionId === action.id,
                'font-semibold bg-gray-50 dark:bg-gray-700':
                  action.id === cms.currentActionId,
              }"
              :disabled="cms.isProcessing"
              @click="cms.performAction(action.id)"
            >
              <span
                v-if="cms.isProcessing && cms.currentActionId === action.id"
                class="flex items-center"
              >
                <font-awesome-icon
                  :icon="['fas', 'spinner']"
                  spin
                  class="mr-2"
                />
                Processing...
              </span>
              <span v-else>
                {{ action.label }}
              </span>
            </button>
          </MenuItem>
        </MenuItems>
      </Transition>
    </Menu>
  </div>
</template>

<script setup lang="ts">
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue';
import { ChevronDownIcon } from '@heroicons/vue/20/solid';
import { useCmsStore } from '@/stores/useCmsStore';

const cms = useCmsStore();
</script>
