<template>
  <FlexRow>
    <SegmentedControlItem
      v-for="(item, i) in values"
      :key="i"
      :index="i"
      :plain="true"
      :maxLen="(values?.length ?? 0) - 1"
      :radius="themeContext.resolveSize(radius)!"
      :textColor="themeContext.resolveThemeColor(textColor)"
      :activeColor="themeContext.resolveThemeColor(tintColor)"
      :activeTextColor="themeContext.resolveThemeColor(activeTextColor)"
      :normalColor="plain ? 
        themeContext.resolveThemeColor('SegmentedControlPlainBackgroundColor') :
        themeContext.resolveThemeColor('SegmentedControlBackgroundColor', 'background.switch')
      "
      :pressedColor="themeContext.resolveThemeColor(themeColorVars.SegmentedControlPressedColor)"
      :label="typeof item === 'object' ? item.label : item"
      :disabled="!touchable || (typeof item === 'object' ? item.disabled || false : false)"
      :active="i === props.selectedIndex"
      :itemStyle="{
        ...themeStyles.item.value,
        ...(fill ? { 
          flexGrow: 1,
        } : {}),
        ...(plain ? {
          borderStyle: 'solid',
          borderWidth: themeContext.resolveSize(themeVars.SegmentedControlBorderWidth),
          borderColor: themeContext.resolveThemeColor(tintColor),
        } : {}),
      }"
      :itemTextStyle="themeStyles.itemText.value"
      @click="onItemPress(i)"
    />
  </FlexRow>
</template>

<script setup lang="ts">
import FlexRow from '../layout/FlexRow.vue';
import FlexView from '../layout/FlexView.vue';
import { propGetThemeVar, useTheme } from '../theme/ThemeDefine';
import { DynamicColor, DynamicSize, DynamicSize2 } from '../theme/ThemeTools';
import SegmentedControlItem from './SegmentedControlItem.vue';


export interface SegmentedControlCustomItem {
  label: string,
  disabled?: boolean,
  [index: string]: unknown;
}
export interface SegmentedControlProps {
  /**
   * 如果为false，用户将无法与控件交互。
   * @default true
   */
  touchable?: boolean | undefined;
  /**
   * 是否为简单外框模式。
   * @default false
   */
  plain?: boolean | undefined,
  /**
   * 选中的条目索引。
   */
  selectedIndex?: number | undefined;
  /**
   * 是否让条目自动填充整个宽度。
   * @default true
   */
  fill?: boolean | undefined;
  /**
   * 控制器的主颜色。
   * @default primary
   */
  tintColor?: string | undefined;
  /**
   * 条目文字颜色。
   * @default text.content
   */
  textColor?: string | undefined;
  /**
   * 条目激活时的文字颜色。
   * @default white
   */
  activeTextColor?: string | undefined;
  /**
   * 圆角
   * @default 10
   */
  radius?: number;
  /**
   * 控件段按钮的标签。
   */
  values?: string[] | SegmentedControlCustomItem[] | undefined;
}

const emit = defineEmits(['update:selectedIndex']);
const props = withDefaults(defineProps<SegmentedControlProps>(), {
  touchable: true,
  fill: true,
  plain: false,
  selectedIndex: 0,
  textColor: () => propGetThemeVar('SegmentedControlTextColor', 'text.content'),
  tintColor: () => propGetThemeVar('SegmentedControlTintColor', 'primary'),
  activeTextColor: () => propGetThemeVar('SegmentedControlActiveTextColor', 'white'),
  radius: 10,
})

function onItemPress(index: number) {
  if (!props.touchable)
    return;
  const item = props.values?.[index]
  if (typeof item === 'object' && item.disabled)
    return;
  emit('update:selectedIndex', index);
}

const themeContext = useTheme();
const themeVars = themeContext.getVars({
  SegmentedControlBorderWidth: 1,
  SegmentedControlPressedOpacity: 0.4,
});
const themeColorVars = themeContext.getColors({
  SegmentedControlPressedColor: 'pressed.notice',
});

const themeStyles = themeContext.useThemeStyles({
  indicator: {
    transition: 'left 0.3s ease-in-out',
    backgroundColor: DynamicColor('SegmentedControlIndicatorColor', 'button')!,
    padding: DynamicSize2('SegmentedControlIndicatorPaddingVertical', 'SegmentedControlIndicatorPaddingHorizontal', 4, 8),
  },
  item: {
    display: 'flex',
    alignSelf: 'auto',
    justifyContent: 'center',
    alignContent: 'center',
    padding: DynamicSize2('SegmentedControlItemPaddingVertical', 'SegmentedControlItemPaddingHorizontal', 8, 16),
    textAlign: 'center',
  },
  itemText: {
    fontSize: DynamicSize('SegmentedControlItemFontSize', 26),
    textAlign: 'center',
  },
});
</script>