<script setup>
import { ref, computed, provide, toRef } from "vue";
import { useNamespace, useLocale } from "@yh-ui/hooks";
import { useComponentTheme } from "@yh-ui/theme";
import { YhTooltip } from "../../tooltip";
import { YhButton } from "../../button";
import { YhIcon } from "../../icon";
import { dropdownProps, dropdownEmits, DROPDOWN_INJECTION_KEY } from "./dropdown";
defineOptions({
  name: "YhDropdown"
});
const props = defineProps(dropdownProps);
const emit = defineEmits(dropdownEmits);
const ns = useNamespace("dropdown");
const { t } = useLocale();
const { themeStyle } = useComponentTheme(
  "dropdown",
  computed(() => props.themeOverrides)
);
const internalVisible = ref(false);
const visible = computed({
  get: () => props.visible !== null ? props.visible : internalVisible.value,
  set: (val) => {
    internalVisible.value = val;
    emit("update:visible", val);
  }
});
const tooltipRef = ref(null);
const popperStyle = computed(() => {
  const styles = {
    ...themeStyle.value
  };
  Object.assign(styles, props.popperStyle);
  if (props.maxHeight) {
    styles.maxHeight = typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight;
    styles.overflowY = "auto";
  }
  return styles;
});
const handleItemClick = (command) => {
  emit("command", command);
  if (props.hideOnClick) {
    visible.value = false;
  }
};
const handleShow = () => {
  emit("show");
};
const handleHide = () => {
  emit("hide");
};
const handleButtonClick = (event) => {
  emit("click", event);
};
const handleDropdownClick = () => {
  visible.value = !visible.value;
};
provide(DROPDOWN_INJECTION_KEY, {
  hideOnClick: toRef(props, "hideOnClick"),
  checkable: toRef(props, "checkable"),
  handleItemClick
});
const handleKeydown = (event) => {
  const { key } = event;
  if (key === "Enter" || key === " " || key === "ArrowDown") {
    event.preventDefault();
    visible.value = true;
  } else if (key === "Escape") {
    visible.value = false;
  }
};
defineExpose({
  /** 手动显示下拉菜单 */
  show: () => {
    visible.value = true;
  },
  /** 手动隐藏下拉菜单 */
  hide: () => {
    visible.value = false;
  },
  /** 当前可见状态 */
  visible
});
</script>

<template>
  <div
    :class="[ns.b(), ns.is('disabled', disabled), ns.is('split', splitButton)]"
    :style="themeStyle"
    @keydown="handleKeydown"
  >
    <YhTooltip
      ref="tooltipRef"
      v-model:visible="visible"
      :trigger="trigger"
      :placement="placement"
      :disabled="disabled"
      :show-after="showAfter"
      :hide-after="hideAfter"
      :z-index="zIndex"
      :teleported="teleported"
      :popper-class="`${ns.e('popper')} ${popperClass}`"
      :popper-style="popperStyle"
      :offset="offset"
      :show-arrow="popperArrow"
      effect="light"
      @show="handleShow"
      @hide="handleHide"
    >
      <template v-if="splitButton">
        <YhButton :type="type || undefined" :size="size" :plain="plain" @click="handleButtonClick">
          <slot />
        </YhButton>
        <YhButton
          :type="type || undefined"
          :size="size"
          :plain="plain"
          :class="ns.e('caret-button')"
          @click.stop="handleDropdownClick"
        >
          <YhIcon name="arrow-down" :class="[ns.e('icon'), {
  [ns.is('active')]: visible
}]" />
        </YhButton>
      </template>
      <template v-else>
        <div :class="ns.e('trigger')" :tabindex="disabled ? void 0 : tabindex">
          <slot />
          <YhIcon
            v-if="showArrow"
            name="arrow-down"
            :class="[ns.e('icon'), {
  [ns.is('active')]: visible
}]"
          />
        </div>
      </template>

      <!-- 下拉内容 -->
      <template #content>
        <div :class="ns.e('menu')">
          <slot name="dropdown">
            <!-- 加载状态 -->
            <div v-if="loading" :class="ns.e('loading')">
              <YhIcon name="loading" spin />
              <span>{{ t("dropdown.loading") || t("select.loading") || "Loading..." }}</span>
            </div>

            <!-- 快捷数据模式 -->
            <template v-else-if="items && items.length > 0">
              <template v-for="item in items" :key="item.key">
                <div v-if="item.divided" :class="ns.e('divider')" />
                <div
                  :class="[ns.e('item'), item.class, {
  [ns.is('disabled')]: item.disabled,
  [ns.is('danger')]: item.danger,
  [ns.is('checked')]: checkable && item.checked
}]"
                  @click="!item.disabled && handleItemClick(item.key)"
                >
                  <YhIcon
                    v-if="checkable"
                    :name="item.checked ? 'check' : ''"
                    :class="ns.e('check-icon')"
                  />
                  <YhIcon v-if="item.icon" :name="item.icon" :class="ns.e('item-icon')" />
                  <span>{{ item.label }}</span>
                </div>
              </template>
            </template>

            <!-- 空状态 - 当既没有插槽又没有数据时显示 -->
            <div v-else :class="ns.e('empty')">
              <slot name="empty">{{ emptyText || t("select.noData") }}</slot>
            </div>
          </slot>
        </div>
      </template>
    </YhTooltip>
  </div>
</template>

<style>
@charset "UTF-8";
/**
 * YH-UI Sass Variables
 * 原具体的 CSS 变量输出规则 (:root, html.dark 等) 已移至 root.scss，以防止各组件样式编译时产生重复的全局变量 CSS 冗余。
 */
.yh-dropdown {
  display: inline-flex;
  align-items: center;
  position: relative;
  color: var(--yh-text-color-primary);
}
.yh-dropdown.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.yh-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  outline: none;
  color: var(--yh-color-primary);
  font-size: var(--yh-font-size-base);
}
.yh-dropdown__trigger:hover {
  color: var(--yh-color-primary-light-3);
}
.yh-dropdown__trigger:focus-visible {
  box-shadow: 0 0 0 2px var(--yh-color-primary-light-5);
  border-radius: var(--yh-radius-sm);
}

.yh-dropdown__icon {
  font-size: 12px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
.yh-dropdown__icon.is-active {
  transform: rotate(180deg);
}

.yh-dropdown__icon.yh-icon {
  color: var(--yh-color-primary);
}

.yh-dropdown__trigger:hover .yh-dropdown__icon.yh-icon {
  color: var(--yh-color-primary-light-3);
}

.yh-dropdown .yh-button .yh-dropdown__icon.yh-icon {
  color: inherit;
}
.yh-dropdown > .yh-tooltip {
  display: inline-flex;
  align-items: stretch;
}
.yh-dropdown__caret-button {
  padding: 0 12px !important;
  min-width: auto !important;
  margin-left: 0 !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: 1px solid var(--yh-color-primary-light-5) !important;
}
.yh-dropdown__caret-button.yh-button--primary:not(.is-plain) {
  border-left-color: rgba(255, 255, 255, 0.5) !important;
}
.yh-dropdown__caret-button.is-plain {
  border-left-color: var(--yh-color-primary-light-5) !important;
}

.yh-dropdown > .yh-tooltip > .yh-button:first-child,
.yh-dropdown > .yh-button:first-child {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-right: 0 !important;
  border-right: none !important;
}
.yh-dropdown__popper {
  background: var(--yh-bg-color-overlay);
  border-radius: var(--yh-radius-lg);
  box-shadow: var(--yh-shadow-lg);
  padding: 6px 0;
  min-width: 120px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.yh-dropdown__menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.yh-dropdown__menu-wrapper {
  list-style: none;
  padding: 0;
  margin: 0;
}

.yh-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  margin: 2px 6px;
  border-radius: var(--yh-radius-md);
  font-size: var(--yh-font-size-base);
  line-height: 1.4;
  color: var(--yh-text-color-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.yh-dropdown__item > span {
  display: inline-flex;
  align-items: center;
}
.yh-dropdown__item:hover {
  background: var(--yh-color-primary-light-9);
  color: var(--yh-color-primary);
}
.yh-dropdown__item:active {
  background: var(--yh-color-primary-light-8);
}
.yh-dropdown__item.is-disabled {
  cursor: not-allowed;
  color: var(--yh-text-color-placeholder);
}
.yh-dropdown__item.is-disabled:hover {
  background: transparent;
  color: var(--yh-text-color-placeholder);
}

.yh-dropdown__item.is-danger {
  color: var(--yh-color-danger);
}
.yh-dropdown__item.is-danger:hover {
  background: var(--yh-color-danger-light-9);
  color: var(--yh-color-danger);
}
.yh-dropdown__item.is-danger:active {
  background: var(--yh-color-danger-light-8);
}

.yh-dropdown__item.is-checked {
  color: var(--yh-color-primary);
  font-weight: 500;
}

.yh-dropdown__item-icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.yh-dropdown__check-icon {
  font-size: 14px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--yh-color-primary);
  margin-right: 4px;
}

.yh-dropdown__divider {
  height: 1px;
  margin: 6px 12px;
  background: var(--yh-border-color-light);
}

.yh-dropdown__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  color: var(--yh-text-color-secondary);
  font-size: var(--yh-font-size-base);
}
.yh-dropdown__loading .yh-icon {
  font-size: 16px;
  color: var(--yh-color-primary);
}

.yh-dropdown__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  color: var(--yh-text-color-placeholder);
  font-size: var(--yh-font-size-base);
}

:root.dark .yh-dropdown,
html.dark .yh-dropdown,
body.dark .yh-dropdown {
  color: var(--yh-text-color-primary);
}
:root.dark .yh-dropdown .yh-dropdown__popper,
html.dark .yh-dropdown .yh-dropdown__popper,
body.dark .yh-dropdown .yh-dropdown__popper {
  background: var(--yh-bg-color-overlay);
  box-shadow: var(--yh-shadow-xl);
}
:root.dark .yh-dropdown .yh-dropdown__item,
html.dark .yh-dropdown .yh-dropdown__item,
body.dark .yh-dropdown .yh-dropdown__item {
  color: var(--yh-text-color-primary);
}
:root.dark .yh-dropdown .yh-dropdown__item:hover,
html.dark .yh-dropdown .yh-dropdown__item:hover,
body.dark .yh-dropdown .yh-dropdown__item:hover {
  background: var(--yh-color-primary-light-9);
}
:root.dark .yh-dropdown .yh-dropdown__item:active,
html.dark .yh-dropdown .yh-dropdown__item:active,
body.dark .yh-dropdown .yh-dropdown__item:active {
  background: var(--yh-color-primary-light-8);
}
:root.dark .yh-dropdown .yh-dropdown__divider,
html.dark .yh-dropdown .yh-dropdown__divider,
body.dark .yh-dropdown .yh-dropdown__divider {
  background: var(--yh-border-color);
}

.yh-dropdown-fade-enter-active,
.yh-dropdown-fade-leave-active {
  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.yh-dropdown-fade-enter-from,
.yh-dropdown-fade-leave-to {
  opacity: 0;
  transform: scaleY(0.9) translateY(-4px);
}
</style>
