<template>
  <AisMenu :items="items"
           class="rounded-[inherit]"
           :class="classes"
           :right="right"
           :dropleft="dropleft"
           :dropright="dropright"
           :dropup="dropup"
  >
    <template #button v-slot="{ open, active}">
      <AisButton :variant="variant"
                 :size="buttonSize"
                 :font="font"
                 :icon="icon"
                 :icon-right="smartIcon"
                 :rounded="rounded"
                 :block="block"
                 :alternate="alternate"
                 :hover="hover"
                 :fast="fast"
                 :press="press"
                 :class="label ? '' : 'icon-only'"
                 :icon-only="!hasLabel"
      ><slot name="label">{{ label }}</slot></AisButton>
    </template>

    <template #default>
      <slot/>
    </template>
  </AisMenu>
</template>


<script setup>
  import AisMenu from "@/components/menu/AisMenu.vue";
  import AisButton from "@/components/button/AisButton.vue";
  import { inputProps } from "@/util/input-props";
  import { customizationProps} from "@/components/button/custom-props";
  import { iconProps } from "@c/icon/ais-icons";
  import { computed, useSlots } from "vue";
  import {useSize} from "@/composables/useInjections";

  const props = defineProps({
    label: { type: String, required: false, default: undefined },
    items: { type: Array, default: () => [] },
    disabled: { type: Boolean, required: false, default: false },
    busy: { type: Boolean, required: false, default: false },
    right: { type: Boolean, default: () => false },
    dropup: { type: Boolean, default: () => false },
    dropright: { type: Boolean, default: () => false },
    dropleft: { type: Boolean, default: () => false },
  ...inputProps,
  ...customizationProps,
  ...iconProps,
    noArrow: { type: Boolean, required: false, default: false },
  })

  const buttonSize = useSize(props, 'md')
  const hasLabel = computed(() => !useSlots().label && !!props.label)

  const classes = computed(() => props.block ? 'w-full' : '')
  const itemsClasses = computed(() => ['bg-white', 'w-56', 'rounded', props.dropup ? 'shadow-top-xl' : 'shadow-xl'])
  const smartIcon = computed(() => {
    if(props.noArrow) return undefined

    if(props.dropleft) return 'left'

    if(props.dropright) return 'right'

    if(props.dropup) return 'up'

    return 'down'
  })
</script>
