<script setup lang="ts">
import ActivityIndicator from '@/components/basic/ActivityIndicator.vue';
import Button from '@/components/basic/Button.vue';
import Text from '@/components/basic/Text.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import type { FlexProps } from '@/components/layout/FlexView.vue';
import Width from '@/components/layout/space/Width.vue';
import { useTheme } from '@/components/theme/ThemeDefine';
import { computed } from 'vue';

export type LoadMoreStatus = ''|'loading'|'finished'|'error'|'nomore'|'loadmore';

export interface LoadMoreProps extends FlexProps {
  /**
   * 加载更多状态
   */
  status?: LoadMoreStatus,
  /**
   * 加载中文字
   * @default '正在努力加载中...'
   */
  loadingText?: string,
  /**
   * 加载完毕文字
   * @default '加载完毕'
   */
  finishedText?: string,
  /**
   * 加载失败文字
   * @default '加载失败'
   */
  errorText?: string,
  /**
   * 没有更多了文字
   * @default '没有更多了'
   */
  nomoreText?: string,
  /**
   * 点击加载更多文字
   * @default '点击加载更多'
   */ 
  loadmoreText?: string,
  /**
   * 重试按钮文字
   * @default '重试'
   */
  retryText?: string,
  /**
   * 是否显示重试按钮
   * @default true
   */
  showRetry?: boolean,
}

const props = withDefaults(defineProps<LoadMoreProps>(), {
  loadingText: '正在努力加载中...',
  finishedText: '加载完毕',
  errorText: '加载失败',
  nomoreText: '没有更多了',
  loadmoreText: '点击加载更多',
  retryText: '重试',
  showRetry: true,
});
const emit = defineEmits<{
  (e: 'retry'): void;
}>();

const themeContext = useTheme();

const text = computed(() => {
  switch (props.status) {
    case 'loading': return props.loadingText;
    case 'finished': return props.finishedText;
    case 'error': return props.errorText;
    case 'nomore': return props.nomoreText;
    case 'loadmore': return props.loadmoreText;
  }
  return '';
})
</script>

<template>
  <FlexRow 
    :padding="[10,20]"
    justify="center"
    align="center" 
    :backgroundColor="themeContext.resolveThemeColor('LoadMoreBackgroundColor', 'background.bar')" 
    v-bind="$attrs"
  >
    <template v-if="props.status === 'loading'">
      <ActivityIndicator  :size="30" />
      <Width :size="20" />
    </template>
    <Text :text="text" fontConfig="subText" />
    <template v-if="props.showRetry && props.status === 'error'">
      <Width :size="20" />
      <Button
        type="text"
        textColor="primary"
        :text="props.retryText"
        @click="emit('retry')"
      />
    </template>
  </FlexRow>
</template>