<template>
  <view :style="(hostStyle as any)">
    <slot />
  </view>
</template>


<script setup lang="ts">
import { useChildLinkParent } from '@/components/composeabe/ChildItem';
import { propGetThemeVar, useTheme } from '@/components/theme/ThemeDefine';
import { computed, provide, toRef } from 'vue';

/**
 * 宫格可以在水平方向上把页面分隔成等宽度的区块, 主要使用场景如：热门内容等。
 */

export interface GridProps {
  /**
   * 内容排列方式
   * @default vertical
   */
  direction?: 'horizontal' | 'vertical'|'vetical-reverse'|'horizontal-reverse';
  /**
   * 交叉轴元素间距。
   * @default 0
   */ 
  crossAxisSpacing?: number;
  /**
   * 主轴上的元素数量。
   * @default 4
   */
  mainAxisCount?: number;
  /**
   * 主轴元素间距。
   * @default 0
   */
  mainAxisSpacing?: number;
  /**
   * 设置 square 属性后，格子的高度会和宽度保持一致。
   * @default false
   */
  square?: boolean;
  /**
   * 是否显示边框
   * @default true
   */
  borderGrid?: boolean;
  /**
   * 边框的宽度
   * @default 1
   */
  borderWidth?: number | string;
  /**
   * 边框颜色
   * @default #ddd
   */
  borderColor?: string;
  /**
   * 宽度减去的值
   * @default 0
   */
  widthCut?: number | string;

}

const theme = useTheme();

const props = withDefaults(defineProps<GridProps>(), {
  direction: 'vertical',
  crossAxisSpacing: 0,
  mainAxisCount: 4, 
  mainAxisSpacing: 0,
  square: false,
  borderGrid: true,
  borderWidth: () => propGetThemeVar('GridBorderSize', '1px'),
  borderColor: () => propGetThemeVar('GridBorderColor', 'border.cell'),
  widthCut: 0,
});

const borderColorValue = computed(() => theme.resolveThemeColor(props.borderColor, "border"));
const borderWidth = computed(() => theme.resolveThemeSize(props.borderWidth, "border"));
const hostStyle = computed(() => ({
  position: 'relative',
  display: 'flex',
  flexDirection: 'row',
  flexWrap: 'wrap',
  justifyContent: 'flex-start',
  alignItems: 'flex-start',
  gap: `${theme.resolveThemeSize(props.mainAxisSpacing)} ${theme.resolveThemeSize(props.crossAxisSpacing)}`,
  border: props.borderGrid ? `${borderWidth.value} solid ${borderColorValue.value}` : undefined,
}));

const itemSize = computed(() => {
  const flexBasis = (100 / props.mainAxisCount);
  const cutSize = theme.resolveThemeSize('GridItemPaddingHorizontal', 8) 
  const cutSize2 = theme.resolveSize(props.mainAxisSpacing - props.mainAxisSpacing / props.mainAxisCount);
  const widthCut = theme.resolveThemeSize(props.widthCut);

  const cutSizes = [] as string[];
  if (widthCut && !widthCut.startsWith('0'))
    cutSizes.push(widthCut);
  if (cutSize2 && !cutSize2.startsWith('0'))
    cutSizes.push(cutSize2);
  if (cutSize && !cutSize.startsWith('0')) {
    cutSizes.push(cutSize);
    cutSizes.push(cutSize);
  }
  cutSizes.push(borderWidth.value!);

  return `calc(${flexBasis}% - ${cutSizes.join(' - ')})`;
});

const {
  getPosition,
  resetCounter,
} = useChildLinkParent({
  getPositionExtra(index) {
    return {
      row: Math.floor(index / props.mainAxisCount) + 1,
      column: (index % props.mainAxisCount) + 1
    }
  },
});

provide('gridContext', {
  square: toRef(props.square),
  direction: toRef(props.direction),
  borderGrid: toRef(props.borderGrid),
  mainAxisCount: toRef(props.mainAxisCount),
  mainAxisSpacing: toRef(props.mainAxisSpacing),
  crossAxisSpacing: toRef(props.crossAxisSpacing),
  itemSize,
  borderColorValue,
  borderWidth,
  getPosition,
  resetCounter,
});
</script>