<template>
  <view 
    :style="{
      ...themeStyles.inputBox.value, 
      ...(selfIndex === activeIndex ? themeStyles.inputBoxActive.value : themeStyles.inputBox.value)
    }"
    @click="emit('click', selfIndex)"
  >
    <text :style="themeStyles.inputBoxText.value">{{selfIndex < text.length ? text[selfIndex] : ''}}</text>
  </view>
</template>

<script setup lang="ts">
import { useTheme } from '../theme/ThemeDefine';
import { DynamicColor, DynamicSize } from '../theme/ThemeTools';

export interface PlateKeyBoardInputBoxProps {
  text: string,
  selfIndex: number,
  activeIndex: number,
}

const emit = defineEmits([ 'click' ])
defineProps<PlateKeyBoardInputBoxProps>();

const themeContext = useTheme();
const themeStyles = themeContext.useThemeStyles({
  inputBox: {
    display: 'flex',
    height: DynamicSize('PlateKeyBoardInputBoxHeight', 90),
    flex: 1,
    borderStyle: 'solid',
    borderWidth: DynamicSize('PlateKeyBoardInputBoxBorderWidth', 4),
    borderColor: DynamicColor('PlateKeyBoardInputBoxBorderColor', 'light'),
    borderRadius: DynamicSize('PlateKeyBoardInputBoxBorderRadius', 10),
    margin: DynamicSize('PlateKeyBoardInputBoxMargin', 10),
    justifyContent: 'center',
    alignItems: 'center',
  },
  inputBoxText: {
    display: 'flex',
    fontSize: DynamicSize('PlateKeyBoardInputBoxFontSize', 32),
    fontWeight: DynamicSize('PlateKeyBoardInputBoxFontWeight', 'bold'),
    color: DynamicColor('PlateKeyBoardInputBoxColor', 'black'),
  },
  inputBoxActive: {
    display: 'flex',
    borderColor: DynamicColor('PlateKeyBoardInputBoxActiveColor', 'primary'),
  },
});

defineOptions({
  options: {
    virtualHost: true,
  }
})
</script>