<template>
  <IconButton
    v-if="!isListStyle"
    :icon="themeContext.getVar('UploaderAddIcon', 'add')"
    :size="themeContext.getVar('UploaderAddIconSize', 60)"
    :pressedBackgroundColor="themeContext.getVar('UploaderListAddItemPressedBackgroundColor', 'pressed.button')"
    :buttonStyle="{
      ...themeStyles.itemAddButton.value, 
      ...props.style, 
      width: themeContext.resolveSize(itemSize.width),
      height: themeContext.resolveSize(itemSize.height),
    }"
    @click="emit('click')"
  />
  <Button block v-else text="上传" icon="upload" @click="emit('click')" />
</template>

<script setup lang="ts">
import Button from '../basic/Button.vue';
import IconButton from '../basic/IconButton.vue';
import { useTheme, type ViewStyle } from '../theme/ThemeDefine';
import { DynamicColor, DynamicSize, DynamicVar } from '../theme/ThemeTools';

export interface UploaderListAddItemProps {
  style?: ViewStyle;
  isListStyle?: boolean;
  itemSize: { width: number, height: number };
}

const props = defineProps<UploaderListAddItemProps>();
const emit = defineEmits(['click'])
const themeContext = useTheme();

const themeStyles = themeContext.useThemeStyles({
  itemAddButton: {
    overflow: 'hidden',
    backgroundColor: DynamicColor('UploaderListAddItemBackgroundColor', 'button'),
    backgroundImage: DynamicVar('UploaderListAddItemBackgroundImage', 'none'),
    backgroundSize: '100% 100%',
    backgroundRepeat: 'no-repeat',
    borderRadius: DynamicSize('UploaderListAddItemBorderRadius', 20),
    margin: DynamicSize('UploaderListAddItemMargin', 4),
  },
});

</script>