<template>
  <Touchable
    center
    :direction="flexDirection"
    :innerStyle="style"
    :touchable="touchable"
    :setCursor="false"
    :radius="themeContext.resolveThemeSize(radius)"
    @click="emit('click')"
  >
    <slot>
      <Icon 
        v-if="icon"
        :icon="icon"
        :innerStyle="iconStyle"
        :color="iconColor"
        :size="iconSize"
        v-bind="iconProps"
      />
      <Text
        v-if="subTitle"
        :innerStyle="{
          color: themeContext.resolveThemeColor(subTitleColor),
          ...titleImageStyle,
          ...subTitleStyle
        }"
        :text="subTitle"
      />
      <Text
        v-if="title"
        :innerStyle="{
          color: themeContext.resolveThemeColor(titleColor),
          ...(direction === 'vetical' ? { marginTop: 6 } : {}),
          ...titleStyle,
        }"
        :text="title"
      />
    </slot>
  </Touchable>
</template>

<script setup lang="ts">
import type { IconProps } from '@/components/basic/Icon.vue';
import { propGetThemeVar, useTheme } from '@/components/theme/ThemeDefine';
import { computed, inject } from 'vue';
import type { FlexDirection } from '../FlexView.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import Icon from '@/components/basic/Icon.vue';
import Text from '@/components/basic/Text.vue';


export interface GridItemProps {  
  /**
   * 标题
   */
  title?: string,
  /**
   * 文字颜色
   * @default Color.black
   */
  titleColor?: string,
  /**
   * 文字自定义样式
   */
  titleStyle?: object,
  /**
   * 背景颜色
   * @default Color.white
   */
  backgroundColor?: string,
  /**
   * 是否开启点击反馈
   * @default true
   */
  touchable?: boolean,
  /**
   * 点击高亮颜色
   * @default PressedColor(Color.white)
   */
  highlightColor?: string,
  /**
   * 图标名称或图片链接（http/https），等同于 Icon 组件的 icon
   */
  icon?: string,
  /**
   * 图标大小
   */
  iconSize?: number,
  /**
   * 图标颜色
   * @default Color.text
   */
  iconColor?: string,
  /**
   * 图标自定义属性
   */
  iconProps?: IconProps;
  /**
   * 图标自定义样式
   */
  iconStyle?: object,
  /**
   * 如果填写字段，则在图片位置显示文字。同时icon不生效。
   */
  subTitle?: string;
  /**
   * 图片位置显示文字的颜色。
   * @default Color.text
   */
  subTitleColor?: string;
  /**
   * 图片位置显示文字的样式。
   */
  subTitleStyle?: object;
  /**
   * 格子内容排列的方向，可选值为 horizontal
   * @default 'vetical'
   */
  direction?: 'vetical'|'horizontal'|'vetical-reverse'|'horizontal-reverse',
  /**
   * 自定义样式
   */
  innerStyle?: object,
  /**
   * 圆角
   */
  radius?: number|string,
}

const props = withDefaults(defineProps<GridItemProps>(), {
  highlightColor: () => propGetThemeVar('GridItemHighlightColor', 'pressed.white'),
  backgroundColor: () => propGetThemeVar('GridItemBackgroundColor', 'white'),
  iconColor: () => propGetThemeVar('GridItemIconColor', 'text.content'),
  iconSize: () => propGetThemeVar('GridItemIconSize', 42),
  iconStyle: () => propGetThemeVar('GridItemIconStyle', {}),
  radius: () => propGetThemeVar('GridItemRadius', 0),
  subTitle: () => propGetThemeVar('GridItemSubTitle', ''),
  subTitleStyle: () => propGetThemeVar('GridItemSubTitleStyle', {}),
  subTitleColor: () => propGetThemeVar('GridItemSubTitleColor', 'text.second'),
  titleColor: () => propGetThemeVar('GridItemTitleColor', 'text.title'),
  titleStyle: () => propGetThemeVar('GridItemTitleStyle', {}),
  innerStyle: () => propGetThemeVar('GridItemStyle', {}),
  direction: () => propGetThemeVar('GridItemDirection', inject<any>('gridContext').direction.value),
});

const emit = defineEmits([ 'click' ]);
const themeContext = useTheme();

const {
  borderWidth,
  borderColorValue,
  itemSize,
  square,
  borderGrid,
  mainAxisCount,
  getPosition
} = inject('gridContext', {}) as any;

const position = computed(() => getPosition());

const flexDirection = computed(() => 
  (props.direction.startsWith('horizontal') ? 'row' : 'column') + 
  (props.direction.endsWith('-reverse') ? '-reverse' : '') as FlexDirection
)


const iconStyle = computed(() => {
  return {
    margin: themeContext.resolveThemeSize('GridItemIconMarginVertical', 10) + ' ' + themeContext.resolveThemeSize('GridItemIconMarginHorizontal', 8),
    ...props.iconStyle,
  } 
})
const titleStyle = computed(() => {
  return {
    margin: themeContext.resolveThemeSize('GridItemPaddingVertical', 8) + ' ' + themeContext.resolveThemeSize('GridItemPaddingHorizontal', 8),
    ...props.titleStyle,
  } 
})
const titleImageStyle = computed(() => {
  return {
    fontSize: themeContext.resolveThemeSize('GridItemSubTitleFontSize', 24),
    marginTop: themeContext.resolveThemeSize('GridItemSubTitleMarginTop', 10),
  } 
})
const style = computed(() => {
  const o : Record<string, any> = {
    display: 'flex',
    // #ifdef APP-NVUE
    width: itemSize.value,
    minWidth: itemSize.value,
    // #endif
    // #ifndef APP-NVUE
    flexBasis: itemSize.value,
    // #endif
    aspectRatio: square.value ? 1 : undefined,
    alignSelf: 'stretch',
    flexShrink: 0,
    flexGrow: 0,
    padding: themeContext.resolveThemeSize('GridItemPaddingVertical', 22) + ' ' + themeContext.resolveThemeSize('GridItemPaddingHorizontal', 8),
    backgroundColor: themeContext.resolveThemeColor(props.backgroundColor),
    ...props.innerStyle,
  } 
  if (borderGrid.value) {
    if ((position.value.index + 1) % mainAxisCount.value !== 0)
      o.borderRight = `${borderWidth.value} solid ${borderColorValue.value}`;
    o.borderBottom = `${borderWidth.value} solid ${borderColorValue.value}`;
  }
  return o;
})

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