<script setup>
import { computed, useSlots } from "vue";
import { iconProps, getIcon } from "./icon";
import { useNamespace } from "@yh-ui/hooks";
import { useComponentTheme } from "@yh-ui/theme";
defineOptions({
  name: "YhIcon",
  inheritAttrs: false
});
const props = defineProps(iconProps);
const slots = useSlots();
const ns = useNamespace("icon");
const { themeStyle } = useComponentTheme(
  "icon",
  computed(() => props.themeOverrides)
);
const iconStyle = computed(() => {
  const style = {
    ...themeStyle.value
  };
  if (props.size) {
    const size = typeof props.size === "number" ? `${props.size}px` : props.size;
    style.fontSize = size;
    style.width = size;
    style.height = size;
  }
  if (props.color) {
    style.color = props.color;
  }
  if (props.rotate) {
    style.transform = `rotate(${props.rotate}deg)`;
  }
  return style;
});
const iconClass = computed(() => [
  ns.b(),
  {
    [ns.m("spin")]: props.spin
  }
]);
const svgContent = computed(() => {
  if (props.svg) {
    return props.svg;
  }
  if (props.name) {
    const icon = getIcon(props.name);
    if (icon) {
      return icon.svg;
    }
  }
  if (typeof props.icon === "string") {
    const icon = getIcon(props.icon);
    if (icon) {
      return icon.svg;
    }
  }
  if (props.icon && typeof props.icon === "object" && "__svg" in props.icon) {
    return props.icon.__svg;
  }
  return "";
});
const viewBox = computed(() => {
  if (props.name) {
    const icon = getIcon(props.name);
    if (icon?.viewBox) {
      return icon.viewBox;
    }
  }
  if (typeof props.icon === "string") {
    const icon = getIcon(props.icon);
    if (icon?.viewBox) {
      return icon.viewBox;
    }
  }
  if (props.icon && typeof props.icon === "object" && "__viewBox" in props.icon) {
    return props.icon.__viewBox;
  }
  return "0 0 24 24";
});
const hasSlot = computed(() => !!slots.default);
const useIconComponent = computed(() => {
  if (!props.icon) return false;
  if (typeof props.icon === "string") {
    const icon = getIcon(props.icon);
    return !icon;
  }
  return typeof props.icon === "object" && !("__svg" in props.icon);
});
</script>

<template>
  <i :class="iconClass" :style="iconStyle" v-bind="$attrs">
    <!-- 使用传入的图标组件 -->
    <component v-if="useIconComponent" :is="icon" class="yh-icon__inner" />

    <!-- 使用 SVG 字符串渲染 -->
    <!-- eslint-disable vue/no-v-html -->
    <svg
      v-else-if="svgContent && !hasSlot"
      class="yh-icon__svg"
      :viewBox="viewBox"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      v-html="svgContent"
    />
    <!-- eslint-enable vue/no-v-html -->

    <!-- 使用插槽自定义内容 -->
    <template v-else-if="hasSlot">
      <slot />
    </template>
  </i>
</template>

<style>
@charset "UTF-8";
/**
 * YH-UI Sass Variables
 * 原具体的 CSS 变量输出规则 (:root, html.dark 等) 已移至 root.scss，以防止各组件样式编译时产生重复的全局变量 CSS 冗余。
 */
.yh-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-size: inherit;
  line-height: 1;
  color: inherit;
  fill: currentColor;
  vertical-align: -0.15em;
  outline: none;
}
.yh-icon__svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.yh-icon__inner {
  width: 1em;
  height: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.yh-icon__inner svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.yh-icon--spin {
  animation: yh-icon-spin 2s linear infinite;
}

@keyframes yh-icon-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
