<template>
  <BaseBox 
    v-bind="props"
    :type="'avatar'"
    :inner-style="{
      ...selectStyleType(props.shape, 'circle', {
        circle: themeStyles.skeletonAvatarCircle.value,
        square: themeStyles.skeletonAvatar.value,
      }),
      ...selectStyleType(props.size, 'medium', {
        small: themeStyles.skeletonAvatarSm.value,
        medium: themeStyles.skeletonAvatarMd.value,
        large: themeStyles.skeletonAvatarLg.value,
      }),
      ...props.innerStyle,
    }"
  />
</template>

<script setup lang="ts">
import { useTheme } from '@/components/theme/ThemeDefine';
import { DynamicSize, selectStyleType } from '@/components/theme/ThemeTools';
import BaseBox, { type SkeletonItemSize, type SleletonBaseBoxProps } from './SkeletonBaseBox.vue';

const themeContext = useTheme();
const themeStyles = themeContext.useThemeStyles({
  skeletonAvatar: {
    borderRadius: DynamicSize('SkeletonAvatarRadius', 10),
  },
  skeletonAvatarCircle: {
  },
  skeletonAvatarSm: {
    width: DynamicSize('SkeletonAvatarSmWidth', 50),
    height: DynamicSize('SkeletonAvatarSmHeight', 50),
  },
  skeletonAvatarMd: {
    width: DynamicSize('SkeletonAvatarMdWidth', 80),
    height: DynamicSize('SkeletonAvatarMdHeight', 80),
  },
  skeletonAvatarLg: {
    width: DynamicSize('SkeletonAvatarLgWidth', 150),
    height: DynamicSize('SkeletonAvatarLgHeight', 150),
  },
});

export interface SkeletonAvatarProps extends SleletonBaseBoxProps {
  /**
   * 形状
   * @default 'circle'
   */
  shape: 'circle' | 'square'; 
  /**
   * 大小预设
   * @default 'medium'
   */
  size?: SkeletonItemSize,
}

const props = withDefaults(defineProps<SkeletonAvatarProps>(), {
  shape: 'circle',
  size: 'medium',
});

defineOptions({
  options: {
    virtualHost: true,
    styleIsolation: "shared",
  },
});
</script>
