<template>
  <slot v-if="loading" name="placeholder"></slot>
  <slot v-else />
</template>

<script setup lang="ts">
import { computed, provide, toRef, type Ref } from 'vue';
import { useTheme } from '../theme/ThemeDefine';

export interface SkeletonProps {
  /**
   * 为 true 时，显示占位元素 placeholder slot。反之则显示内容组件 default slot
   * @default false
   */
  loading?: boolean;
  /**
   * 是否展示动画效果
   * @default false
   */
  active?: boolean;
  /**
   * 占位元素颜色
   * @default skeleton
   */
  color?: string;
}

const props = withDefaults(defineProps<SkeletonProps>(), {
  loading: false,
  active: false,
  color: 'skeleton',
});
const themeContext = useTheme();
const color = computed(() => themeContext.resolveThemeColor(props.color));

export interface SkeletonContext {
  color: Ref<string>;
  active: Ref<boolean>;
}
provide('SkeletonContext', {
  color: color,
  active: toRef(props, 'active'),
});

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

<style lang="scss">
.nana-skeleton {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;

  :deep(.anim-box) {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.001) 25%, rgba(0, 0, 0, 0.015) 37%, rgba(0, 0, 0, 0.001) 63%);
    width: 200%;
    height: 100%;
    animation: skeleton-anim 1s linear infinite;
    display: none;
    flex-shrink: 0;
  }

  &.anim {
    :deep(.anim-box) {
      display: initial;
    }
  }
  &.avatar {
    border-radius: 50%;
  }
}

@keyframes skeleton-anim {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}


</style>
