<script setup lang="ts">
import FlexCol from '../layout/FlexCol.vue';
import { propGetThemeVar, useTheme, type ViewStyle } from '../theme/ThemeDefine';
import { DynamicColor, DynamicSize, selectStyleType } from '../theme/ThemeTools';
import ImageDefault from '../images/empty-image-default.png';
import ImageError from '../images/empty-image-error.png';
import ImageNetwork from '../images/empty-image-netowok.png';
import ImageSearch from '../images/empty-image-search.png';
import { computed } from 'vue';
import Text from '../basic/Text.vue';
import Image from '../basic/Image.vue';

type EmptyImageType = 'default'|'error'|'network'|'search';

export interface EmptyProp {
  /**
   * 图片下方的描述文字
   * @default ''
   */
  description?: string,
  /**
   * 图片类型，可选值为 `error` `network` `search`，支持传入图片
   * @default 'default'
   */
  image?: EmptyImageType|string,
  /**
   * 	图片大小
   * @default 100rpx
   */
  imageSize?: number,
  /**
   * 自定义样式
   */
  innerStyle?: ViewStyle;
}

const props = withDefaults(defineProps<EmptyProp>(), {
  imageSize: () => propGetThemeVar('EmptyImageSize', 200),
  image: () => propGetThemeVar('EmptyImage', 'default'),
})

const theme = useTheme();
const themeStyles = theme.useThemeStyles({
  view: {
    width: '100%',
    flexDirection: 'column',
    alignItems: 'center',
    padding: DynamicSize('EmptyPadding', 20),
    flex: 1,
  },
  descriptionStyle: {
    paddingVertical: DynamicSize('EmptyDescriptionPaddingVertical', 8),
    fontSize: DynamicSize('EmptyDescriptionFontSize', 26),
    color: DynamicColor('EmptyDescriptionColor', 'text.second'),
    textAlign: 'center',
  },
});

const imageStyle = computed(() => {
  const s = theme.resolveThemeSize(props.imageSize);
  return {
    width: s,
    height: s,
  }
});

const imageSrc = computed(() => {
  const src = selectStyleType<string, EmptyImageType>(props.image as EmptyImageType, 'default', {
    default: ImageDefault,
    error: ImageError,
    network: ImageNetwork,
    search: ImageSearch,
  });
  if (src)
    return src;
  return props.image;
});
</script>

<template>
  <FlexCol 
    :innerStyle="{ ...themeStyles.view.value, ...innerStyle }"
    center
  >
    <Image :src="imageSrc" :innerStyle="imageStyle" />
    <Text v-if="description" :innerStyle="themeStyles.descriptionStyle.value" :text="description" />
    <slot />
  </FlexCol>
</template>