import type { CSSProperties, ReactNode } from 'react';
import type { GroupKey, GroupResult } from '@pisell/utils';
/**
 * 单个分组的数据模型
 * @template T - 数据项类型
 * @description 复用 `@pisell/utils` 的 `GroupResult`，包含 groupId、keys、keyMap、items 等
 */
export declare type GroupModel<T> = GroupResult<T>;
/**
 * 主体（第三块）渲染单条数据时的上下文
 * @template T - 数据项类型
 */
export interface ItemContext<T> {
    /** 当前数据所属分组 */
    group: GroupModel<T>;
    /** 当前数据在分组内的下标 */
    index: number;
    /**
     * 参与分组的字段名列表
     * @description
     * 调用方可据此在卡片中省略「头部已展示」的字段，避免重复展示。
     * 当使用自定义函数分组时，该数组为空。
     */
    groupKeys: string[];
}
/**
 * 主体（第三块）的布局配置
 * @description
 * - `'stack'`：纵向堆叠每条卡片（默认）
 * - 对象：透传给内部 `PisellBasicGrid` 实现多列/横向布局
 */
export declare type ItemLayout = 'stack' | {
    /** 一行显示的卡片数 */
    columns?: number;
    /** 卡片间距 */
    gap?: number | string;
    /** 排列方向 */
    direction?: 'horizontal' | 'vertical';
    /** 是否换行 */
    wrap?: 'wrap' | 'nowrap';
};
/**
 * 一个分组渲染出的四块内容
 * @description 透传给 `renderGroup`，便于调用方自定义整组容器但复用四块默认内容
 */
export interface GroupBlocks {
    /** ① 头部：分组条件对应的相同信息 */
    header: ReactNode;
    /** ② 统计栏：来自分组数据的统计信息 */
    stats: ReactNode;
    /** ③ 主体：分组内所有条目（卡片） */
    body: ReactNode;
    /** ④ 操作区：批量操作 */
    actions: ReactNode;
}
/**
 * 多端 variant
 * @description 仅用于在根节点追加 `--${variant}` class，由 Less 控制展示差异
 */
export declare type GroupViewVariant = 'desktop' | 'tablet' | 'pos' | 'phone';
/**
 * PisellGroupView 组件 Props
 * @template T - 数据项类型
 * @description
 * 通用、数据无关的「分组展示容器」：先按 `groupBy` 将 `dataSource` 分组，
 * 再为每个分组渲染头部 / 统计 / 主体 / 操作四块，各块均可由外部自定义渲染。
 */
export interface PisellGroupViewProps<T = unknown> {
    /** 数据源（应为外部已映射好的列表） */
    dataSource: T[];
    /**
     * 分组规则
     * @description
     * - `string`：单字段路径，支持 `'a.b.c'` 点路径
     * - `string[]`：多字段组合（如 `['productId', 'time']`）
     * - `(item, index) => GroupKey | GroupKey[]`：完全自定义
     */
    groupBy: string | string[] | ((item: T, index: number) => GroupKey | GroupKey[]);
    /** 自定义分组 id 生成，默认各键以 `|` 拼接 */
    getGroupId?: (keys: GroupKey[]) => string;
    /** 分组之间的排序；不传保持首次出现顺序 */
    sortGroups?: (a: GroupModel<T>, b: GroupModel<T>) => number;
    /** 分组内数据项的排序；不传保持原始相对顺序 */
    sortItems?: (a: T, b: T) => number;
    /** ① 头部：分组条件对应的相同信息（时间、商品名、客户等） */
    renderHeader?: (group: GroupModel<T>) => ReactNode;
    /** ② 统计栏：可自定义展示，数据来源于分组后的数据 */
    renderStats?: (group: GroupModel<T>) => ReactNode;
    /** ③ 主体：渲染分组内的单条数据为卡片 */
    renderItem?: (item: T, ctx: ItemContext<T>) => ReactNode;
    /** ④ 操作区：批量操作（加时、编辑等） */
    renderActions?: (group: GroupModel<T>) => ReactNode;
    /**
     * 主体布局
     * @default 'stack'
     */
    itemLayout?: ItemLayout;
    /**
     * 自定义主体容器
     * @param group - 当前分组
     * @param defaultBody - 组件按 `itemLayout` + `renderItem` 渲染出的默认主体
     */
    renderBody?: (group: GroupModel<T>, defaultBody: ReactNode) => ReactNode;
    /**
     * 自定义整组容器
     * @param group - 当前分组
     * @param blocks - 四块默认内容（header/stats/body/actions）
     * @description 提供后将完全接管单个分组的结构，调用方可自由编排四块顺序与包裹
     */
    renderGroup?: (group: GroupModel<T>, blocks: GroupBlocks) => ReactNode;
    /** 数据源为空时的渲染 */
    renderEmpty?: () => ReactNode;
    /**
     * 主体内单条卡片的 key
     * @description 不传时使用 index（仅在列表无增删改时安全）
     */
    rowKey?: string | ((item: T, index: number) => string);
    /** 多端 variant，仅追加根节点 class */
    variant?: GroupViewVariant;
    /** 自定义类名 */
    className?: string;
    /** 自定义样式 */
    style?: CSSProperties;
}
