<template>
  <Touchable
    :activeOpacity="touchable ? 0.8 : 0.4" 
    :innerStyle="{
      ...themeStyles.sideItem.value,
      ...props.innerStyle,
      ...(active ? context.activeStyle.value : context.inactiveStyle.value),
      ...(touchable ? {} : { opacity: 0.2 }),
    }"
    :touchable="touchable"
    @click="handleClick">

    <view v-if="active" :style="{ 
      ...themeStyles.sideActiveBadge.value, 
      ...context.activeBadgeStyle.value 
    }" />
    <Badge
      :content="props.badge === -1 ? '' : ((typeof props.badge === 'undefined' || props.badge === 0) ? 0 : props.badge)" 
      :offset="{ x: 3, y: 3 }" 
      v-bind="props.badgeProps"
    >
      <!-- 自定义渲染文字回调
      * selected ：表示当前标签是否选中
      * textProps ：Text的属性，可以用于自定义图标渲染
      -->
      <slot name="text" :active="active" :textProps="textProps">
        <Text v-bind="textProps">{{props.text}}</Text>
      </slot>
    </Badge>
  </Touchable>
</template>


<script setup lang="ts">
import { computed, inject } from 'vue';
import type { BadgeProps } from '../display/Badge.vue';
import { useTheme, type TextStyle, type ViewStyle } from '../theme/ThemeDefine';
import type { SideBarContext } from './SideBar.vue';
import { DynamicColor, DynamicSize } from '../theme/ThemeTools';
import Badge from '../display/Badge.vue';
import Text from '../basic/Text.vue';
import Touchable from '../feedback/Touchable.vue';


export interface SideBarItemProps {
  /**
   * 标签名称，必填, 请保证不重复
   * @required true
   */
  name: string|number;
  /**
    * 标签文字
    */
  text?: string;
  /**
   * 是否可以点击
   * @default true
   */
  touchable?: boolean;
  /**
    * 标签文字样式
    */
  textStyle?: TextStyle;
  /**
    * 标签标记。为 0 或者 未定义时不显示，为 -1时显示圆点，为大于0的数时显示数字标记
    */
  badge?: number;
  /**
    * 自定义徽标的属性，传入的对象会被透传给 Badge 组件的 props
    */
  badgeProps?: BadgeProps;
  /**
    * 自定义标签样式
    */
  innerStyle?: ViewStyle;
}

const props = withDefaults(defineProps<SideBarItemProps>(), {
  touchable: true,

});

const themeContext = useTheme();
const themeStyles = themeContext.useThemeStyles({
  sideText: {
    fontSize: DynamicSize('SideBarItemTextFontSize', 28),
  },
  sideItem: {
    position: 'relative',
    paddingVertical: DynamicSize('SideBarItemPaddingVertical', 36),
    paddingHorizontal: DynamicSize('SideBarItemPaddingHorizontal', 30),
    alignSelf: 'stretch',
  },
  sideActiveBadge: {
    backgroundColor: DynamicColor('SideBarItemActiveBadgeBackgroundColor', 'primary'),
    position: 'absolute',
    left: DynamicSize('SideBarItemActiveBadgeLeft', 0),
    top: DynamicSize('SideBarItemActiveBadgeTop', '50%'),
    marginTop: DynamicSize('SideBarItemActiveBadgeMarginTop', -15),
    right: DynamicSize('SideBarItemActiveBadgeRight', undefined),
    bottom: DynamicSize('SideBarItemActiveBadgeBottom', undefined),
    height: DynamicSize('SideBarItemActiveBadgeHeight', 30),
    width: DynamicSize('SideBarItemActiveBadgeWidth', 8),
    zIndex: 1,
  },
});

const context = inject<SideBarContext>('SideBarContext') as SideBarContext;
const active = computed(() => props.name === context.selectedName.value);
const color =  computed(() => props.touchable ? (active.value ? 
  themeContext.resolveThemeColor(context.activeColor.value) : 
  themeContext.resolveThemeColor(context.inactiveColor.value)) 
  : themeContext.resolveThemeColor(context.disableColor.value)
);

const textProps = computed(() => ({
  style: {
    ...themeStyles.sideText.value,
    color: color.value,
    ...props.textStyle,
  },
}));

function handleClick() {
  if (props.touchable)
    context.onItemClick(props.name || '');
}
</script>