<template>
  <Touchable 
    center 
    innerClass="nana-tag"
    direction="row"
    :innerStyle="{
      ...style,
      ...innerStyle,
    }"
    :touchable="touchable"
    @click="emit('click')"
  >
    <slot name="prefix" />
    <text :style="{
      ...themeStyles.title.value,
      color: themeContext.resolveThemeColor(textColor) || style.color,
      fontSize: selectStyleType(size, 'medium', FonstSizes),
    }">
      {{text}}
    </text>
    <slot name="suffix" />
    <FlexRow v-if="closeable" touchable @click="emit('close')">
      <Icon
        icon="close"
        :size="themeContext.resolveThemeSize('TagCloseIconSize', 30)"
        :color="(props.textColor || style.color as string)"
      />
    </FlexRow>
  </Touchable>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { propGetThemeVar, useTheme, type ViewStyle } from '../theme/ThemeDefine';
import { DynamicColor, DynamicSize, DynamicSize2, selectStyleType } from '../theme/ThemeTools';
import FlexRow from '../layout/FlexRow.vue';
import Icon from '../basic/Icon.vue';
import Touchable from '../feedback/Touchable.vue';

export type TagTypes = 'default'|'primary'|'success'|'warning'|'danger';

export type TagSizes = 'small'|'medium'|'large'|'larger'|'mini';

export interface TagProps {
  /**
   * 文字
   */
  text?: string,
  /**
   * 支持 default、primary、success、warning、danger 五种内置颜色类型
   * @default 'default'
   */
  type?: TagTypes,
  /**
   * 设置 plain 属性设置为空心样式。设置 light 属性设置为浅色样式。
   * @default 'default'
   */
  scheme?: 'plain'|'light'|'default',
  /**
   * 形状 通过 square 设置方形，通过 round 设置圆形, mark设置标记样式(半圆角)。
   * @default 'round'
   */
  shape?: 'square'|'round'|'mark',
  /**
   * 是否可以被关闭
   * @default false
   */
  closeable?: boolean,
  /**
   * 尺寸. 支持 large、medium、small 三种尺寸。
   * @default 'medium'
   */
  size?: TagSizes,
  /**
   * 自定义文字的颜色。
   */
  textColor?: string;
  /**
   * 圆角大小，仅在 shape=round 或者 shape=mark 时有效。
   * @default 10
   */
  borderRadius?: number|string;
  /**
   * 自定义颜色。
   */
  color?: string;
  /**
   * 自定义样式
   */
  innerStyle?: ViewStyle,
  /**
   * 是否可点击
   */
  touchable?: boolean,
}

defineOptions({
  options: {
    virtualHost: true,
    styleIsolation: "shared",
  },
});
const emit = defineEmits([ 'close', 'click' ]);

const themeContext = useTheme();

const props = withDefaults(defineProps<TagProps>(), {
  shape: () => propGetThemeVar('TagShape', 'round'),
  type: () => propGetThemeVar('TagType', 'default'),
  scheme: () => propGetThemeVar('TagScheme', 'default'),
  size: () => propGetThemeVar('TagSize', 'medium'),
  borderRadius: () => propGetThemeVar('TagBorderRadius', 20),
  textColor: () => propGetThemeVar('TagTextColor'),
});

const FonstSizes = {
  mini: themeContext.resolveThemeSize('TagSmallFonstSize', 22),
  small: themeContext.resolveThemeSize('TagSmallFonstSize', 26),
  medium: themeContext.resolveThemeSize('TagMediumFonstSize', 30),
  large: themeContext.resolveThemeSize('TagLargeFonstSize', 36),
  larger: themeContext.resolveThemeSize('TagLargeFonstSize', 48),
};

const themeStyles = themeContext.useThemeStyles({
  title: {
    fontSize: DynamicSize('TagFontSize', 24),
  },
  plainTagDefault: {
    borderStyle: 'solid',
    borderWidth: DynamicSize('TagBorderWidth', 2),
    borderColor: DynamicColor('TagPlainDefaultBorderColor', 'text.content'),
    color: DynamicColor('TagPlainDefaultColor', 'text.content'),
  },
  plainTagPrimary: {
    borderStyle: 'solid',
    borderWidth: DynamicSize('TagBorderWidth', 2),
    borderColor: DynamicColor('TagPlainPrimaryBorderColor', 'primary'),
    color: DynamicColor('TagPlainPrimaryColor', 'primary'),
  },
  plainTagSuccess: {
    borderStyle: 'solid',
    borderWidth: DynamicSize('TagBorderWidth', 2),
    borderColor: DynamicColor('TagPlainSuccessBorderColor', 'success'),
    color: DynamicColor('TagPlainSuccessColor', 'success'),
  },
  plainTagWarning: {
    borderStyle: 'solid',
    borderWidth: DynamicSize('TagBorderWidth', 2),
    borderColor: DynamicColor('TagPlainWarningBorderColor', 'warning'),
    color: DynamicColor('TagPlainWarningColor', 'warning'),
  },
  plainTagDanger: {
    borderStyle: 'solid',
    borderWidth: DynamicSize('TagBorderWidth', 2),
    borderColor: DynamicColor('TagPlainDangerBorderColor', 'danger'),
    color: DynamicColor('TagPlainDangerColor', 'danger'),
  },
  lightTagDefault: {
    backgroundColor: DynamicColor('TagLightDefaultBackgroundColor', 'background.button'),
    color: DynamicColor('TagLightDefaultColor', 'text.content'),
  },
  lightTagPrimary: {
    backgroundColor: DynamicColor('TagLightPrimaryBackgroundColor', 'background.primary'),
    color: DynamicColor('TagLightPrimaryColor', 'primary'),
  },
  lightTagSuccess: {    
    color: DynamicColor('TagLightSuccessColor', 'success'),
    backgroundColor: DynamicColor('TagLightSuccessBackgroundColor', 'background.success'),
  },
  lightTagWarning: {
    backgroundColor: DynamicColor('TagLightWarningBackgroundColor', 'background.warning'),
    color: DynamicColor('TagLightWarningColor', 'warning'),
  },
  lightTagDanger: {
    backgroundColor: DynamicColor('TagLightDangerBackgroundColor', 'background.danger'),
    color: DynamicColor('TagLightDangerColor', 'danger'),
  },
  tagDefault: {
    backgroundColor: DynamicColor('TagDefaultBackgroundColor', 'button'),
    color: DynamicColor('TagDefaultColor', 'black'),
  },
  tagPrimary: {
    backgroundColor: DynamicColor('TagPrimaryBackgroundColor', 'primary'),
    color: DynamicColor('TagPrimaryColor', 'white'),
  },
  tagSuccess: {
    backgroundColor: DynamicColor('TagSuccessBackgroundColor', 'success'),
    color: DynamicColor('TagSuccessColor', 'white'),
  },
  tagWarning: {
    backgroundColor: DynamicColor('TagWarningBackgroundColor', 'warning'),
    color: DynamicColor('TagWarningColor', 'white'),
  },
  tagDanger: {
    backgroundColor: DynamicColor('TagDangerBackgroundColor', 'danger'),
    color: DynamicColor('TagDangerColor', 'white'),
  },
  tagSizeLarger: {
    padding: DynamicSize2('TagSizeLargePaddingVertical', 'TagSizeLargePaddingHorizontal', 20, 25),
  },
  tagSizeLarge: {
    padding: DynamicSize2('TagSizeLargePaddingVertical', 'TagSizeLargePaddingHorizontal', 14, 20),
  },
  tagSizeMedium: {
    padding: DynamicSize2('TagSizeMediumPaddingVertical', 'TagSizeMediumPaddingHorizontal', 9, 15),
  },
  tagSizeSmall: {
    padding: DynamicSize2('TagSizeSmallPaddingVertical', 'TagSizeSmallPaddingHorizontal', 6, 10),
  },
  tagSizeMini: {
    padding: DynamicSize2('TagSizeSmallPaddingVertical', 'TagSizeSmallPaddingHorizontal', 3, 5),
  },
});

const style = computed(() => {
  const borderRadius = themeContext.resolveThemeSize(props.borderRadius);
  const color = themeContext.resolveThemeColor(props.color);
  const style = {
    ...selectStyleType(props.shape, 'round', {
      round: { borderRadius: borderRadius },
      square: {},
      mark: {
        borderTopRightRadius: borderRadius,
        borderBottomRightRadius: borderRadius,
      },
    }),
    ...selectStyleType<ViewStyle, TagTypes>(props.type, 'default', 
      selectStyleType(props.scheme, 'default', {
        default: {
          default: themeStyles.tagDefault.value,
          primary: themeStyles.tagPrimary.value,
          success: themeStyles.tagSuccess.value,
          warning: themeStyles.tagWarning.value,
          danger: themeStyles.tagDanger.value,
        },
        plain: {
          default: themeStyles.plainTagDefault.value,
          primary: themeStyles.plainTagPrimary.value,
          success: themeStyles.plainTagSuccess.value,
          warning: themeStyles.plainTagWarning.value,
          danger: themeStyles.plainTagDanger.value,
        },
        light: {
          default: themeStyles.lightTagDefault.value,
          primary: themeStyles.lightTagPrimary.value,
          success: themeStyles.lightTagSuccess.value,
          warning: themeStyles.lightTagWarning.value,
          danger: themeStyles.lightTagDanger.value,
        },
      }),
    ),
    ...selectStyleType<ViewStyle, TagSizes>(props.size, 'medium', {
      mini: themeStyles.tagSizeMini.value,
      small: themeStyles.tagSizeSmall.value,
      medium: themeStyles.tagSizeMedium.value,
      large: themeStyles.tagSizeLarge.value,
      larger: themeStyles.tagSizeLarger.value,
    }),
    
  } as ViewStyle;
  if (color !== undefined) {
    if (props.scheme === 'plain') {
      style.borderColor = color;
      style.color = color;
    } else if (props.scheme === 'light') {
      style.color = color;
    } else {
      style.backgroundColor = color;
    }
  }
  return style
});
</script>

<style>
.nana-tag {
  display: flex;
  flex: 0;
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: auto;
  min-width: 20rpx;
  width: auto;
  align-self: flex-start;
}

</style>