<template>
  <view
    class="nana-progress"
    :style="{
      ...selectStyleType<ViewStyle, ProgressTypes>(type, 'left-right', {
        'left-right': {
          height: height,
          width: width,
          flexDirection: 'row',
          alignItems: 'center',
          alignSelf: 'flex-start',
        },
        'right-left': {
          height: height,
          width: width,
          flexDirection: 'row',
          alignItems: 'center',
          alignSelf: 'flex-start',
        },
        'top-bottom': {
          width: height,
          height: width,
          flexDirection: 'column',
          justifyContent: 'center',
          alignSelf: 'flex-start',
        },
        'bottom-top': {
          width: height,
          height: width,
          flexDirection: 'column',
          justifyContent: 'center',
          alignSelf: 'flex-start',
        },
      }),
      ...props.innerStyle,
    }"
  >
    <view
      class="bar"
      :style="{
        ...selectStyleType(progressPos, 'flow', {
          left: {
            marginLeft: themeStyles.progressTextSingle.value.width,
          },
          right: {
            marginRight: themeStyles.progressTextSingle.value.width,
          },
          flow: {},
        }),
        ...selectStyleType<ViewStyle, ProgressTypes>(type, 'left-right', {
        'left-right': {
          height: height,
          width: width,
        },
        'right-left': {
          height: height,
          width: width,
        },
        'top-bottom': {
          width: height,
          height: width,
        },
        'bottom-top': {
          width: height,
          height: width,
        },
      }),
        borderRadius: barRadius,
        backgroundColor: barBackgroundColor,
      }"
    >
      <view
        class="inner"
        :style="{
          ...progressStyles,
          width: isHorizontal ? `${precentValue}%` : '100%',
          height: isHorizontal ? '100%' : `${precentValue}%`,
          transition: animate ? `all ease ${animateDuration}ms` : undefined,
        }"
      />
    </view>
    <text
      v-if="showProgressText"
      class="text"
      :style="{
        transition: animate ? `all ease ${animateDuration}ms` : undefined,
        ...selectStyleType(progressPos, 'flow', {
          left: {
            ...themeStyles.progressTextSingle.value,
            left: 0,
          },
          right: {
            ...themeStyles.progressTextSingle.value,
            right: 0,
          },
          flow: {
            backgroundColor: barColor,
            ...themeStyles.progressTextPill.value
          },
        }),
        ...(progressPos === 'flow' ? selectStyleType<ViewStyle, ProgressTypes>(props.type, 'left-right', {
          'left-right': { 
            left: `${precentValue}%`,
            top: '50%',
            transform: 'translateX(-50%) translateY(-50%)',
          },
          'right-left': {
            right: `${precentValue}%`,
            top: '50%',
            transform: 'translateX(50%) translateY(-50%)',
          },
          'top-bottom': {
            top: `${precentValue}%`,
            left: '50%',
            transform: 'translateX(-50%) translateY(50%) rotate(-90deg) ',
          },
          'bottom-top': {
            bottom: `${precentValue}%`,  
            left: '50%',
            transform: 'translateX(-50%) translateY(50%) rotate(90deg)',
          },
        }) : {}),
        ...progressTextStyle,
      }"
    >{{value}}%</text>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { propGetThemeVar, useTheme, type TextStyle, type ViewStyle } from '../theme/ThemeDefine';
import { DynamicColor, DynamicSize, DynamicSize2, DynamicVar, selectStyleType } from '../theme/ThemeTools';

const themeContext = useTheme();

type ProgressTypes = 'left-right'|'right-left'|'top-bottom'|'bottom-top';

export interface ProgressProps {
  /**
   * 当前进度，0-100
   */
  value: number,
  /**
   * 背景的颜色
   * @default gray
   */
  backgroundColor?: string,
  /**
   * 进度的颜色
   * @default primary
   */
  progressColor?: string,
  /**
   * 进度条的方向
   * * left-right 横向，从左到右
   * * right-left 横向，从右到左
   * * top-bottom 竖向，从上到下
   * * bottom-top 竖向，从下到上
   * @default 'left-right'
   */
  type?: ProgressTypes;
  /**
   * 进度条的高度，竖向模式时自动设置为高度
   */
  height?: number;
  /**
   * 进度条宽度，默认100%沾满父容器
   * @default '100%'
   */
  width?: number|string;
  /**
   * 是否显示进度文字
   */
  showProgressText?: boolean;
  /**
   * 进度文字的位置。center 居中；right 居右；flow 跟随进度
   * @default 'flow'
   */
  progressPos?: 'left'|'right'|'flow';
  /**
   * 进度文字的自定义样式
   */
  progressTextStyle?: TextStyle;
  /**
   * 背景样式
   */
  innerStyle?: ViewStyle,
  /**
   * 是否是圆角
   * @default true
   */
  round?: boolean;
  /**
   * round=true 时的圆角大小
   * @default 10
   */
  radius?: number;
  /**
   * 是否有动画效果
   * @default false
   */
  animate?: boolean;
  /**
   * 动画效果时长，ms
   * @default 300
   */
  animateDuration?: number;
  /**
   * 进度的样式
   */
  progressStyle?: ViewStyle,
}


const emit = defineEmits([ 'click' ]);
const props = withDefaults(defineProps<ProgressProps>(), {
  value: 0,
  backgroundColor: () => propGetThemeVar('ProgressBackgroundColor', 'gray'),
  progressColor: () => propGetThemeVar('ProgressProgressColor', 'primary'),
  type: () => propGetThemeVar('ProgressType', 'left-right'),
  height: () => propGetThemeVar('ProgressHeight', 15),
  width: () => propGetThemeVar('ProgressWidth', '100%'),
  showProgressText: () => propGetThemeVar('ProgressShowProgressText', false),
  progressPos: () => propGetThemeVar('ProgressProgressPos', 'flow'),
  round: () => propGetThemeVar('ProgressRound', true),
  radius: () => propGetThemeVar('ProgressRadius', 20),
  animate: () => propGetThemeVar('ProgressAnimate', false),
  animateDuration: () => propGetThemeVar('ProgressAnimateDuration', 300),
});


const value = computed(() => Math.min(100, Math.max(props.value || 0, 0)));
const barColor = computed(() => themeContext.resolveThemeColor(props.progressColor, themeContext.resolveThemeColor('ProgressProgressColor', 'primary')));
const barBackgroundColor = computed(() => themeContext.resolveThemeColor(props.backgroundColor, themeContext.resolveThemeColor('ProgressBackgroundColor', 'grey')));
const barRadius = computed(() => themeContext.resolveSize(props.round ? props.radius : props.height));
const isHorizontal = computed(() => (typeof props.type === 'undefined' || props.type === 'left-right' || props.type === 'right-left'));
const precentValue = computed(() => (value.value / 100) * 100);
const height = computed(() => themeContext.resolveSize(props.height));
const width = computed(() => themeContext.resolveSize(props.width));
const progressStyles = computed(() => ({
  borderRadius: barRadius.value,
  backgroundColor: barColor.value,
  ...selectStyleType<ViewStyle, ProgressTypes>(props.type, 'left-right', {
    'left-right': { left: 0, height: height.value },
    'right-left': { right: 0, height: height.value },
    'top-bottom': { top: 0, width: height.value },
    'bottom-top': { bottom: 0, width: height.value },
  }),
}));

const themeStyles = themeContext.useThemeStyles({
  progressTextPill: {
    width: DynamicSize('ProgressTextWidth', 80),
    textAlign: DynamicVar('ProgressTextAlign', 'center'),
    padding: DynamicSize2('ProgressTextPaddingVertical', 'ProgressTextPaddingHorizontal', 2, 2),
    borderRadius: DynamicSize('ProgressTextBorderRadius', 20),
    fontSize: DynamicSize('ProgressTextFontSize', 24),
    color: DynamicColor('ProgressTextColor', 'white'),
  },
  progressTextSingle: {
    width: DynamicSize('ProgressTextWidth', 80),
    borderRadius: DynamicSize('ProgressTextBorderRadius', 15),
    textAlign: DynamicVar('ProgressTextAlign', 'center'),
    fontSize: DynamicSize('ProgressTextFontSize', 24),
    color: DynamicColor('ProgressTextSingleColor', 'text.content'),
  },
});

</script>

<style lang="scss">
.nana-progress {
  position: relative;
  display: flex;

  .bar {
    position: relative;

    .inner {
      position: absolute;
      z-index: 9;
    }
  }
  .text {
    position: absolute;
    z-index: 10;
  }
}
</style>