import type {
  CSSProperties,
  HTMLAttributes,
  ReactNode,
  Ref,
} from "react";

/** sx 值类型（引用自 CSSFab） */
export type SxValue =
  | string
  | { tw?: string; className?: string; css?: CSSProperties; style?: CSSProperties }
  | Record<string, unknown>;

/** Layout 主容器 Props */
export interface LayoutProps extends Omit<HTMLAttributes<HTMLElement>, "style"> {
  /** 是否包含侧边栏（不传则自动检测 Sider 子组件） */
  hasSider?: boolean;
  /** 样式扩展 */
  sx?: SxValue;
  /** 行内样式 */
  style?: CSSProperties;
  /** 额外 CSS 类名 */
  className?: string;
  /** 子元素 */
  children?: ReactNode;
  /** ref 转发 */
  ref?: Ref<HTMLElement>;
}

/** Header Props */
export interface LayoutHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "style"> {
  /** 样式扩展 */
  sx?: SxValue;
  /** 行内样式 */
  style?: CSSProperties;
  /** 额外 CSS 类名 */
  className?: string;
  /** 子元素 */
  children?: ReactNode;
  /** ref 转发 */
  ref?: Ref<HTMLElement>;
}

/** Footer Props */
export interface LayoutFooterProps extends Omit<HTMLAttributes<HTMLElement>, "style"> {
  /** 样式扩展 */
  sx?: SxValue;
  /** 行内样式 */
  style?: CSSProperties;
  /** 额外 CSS 类名 */
  className?: string;
  /** 子元素 */
  children?: ReactNode;
  /** ref 转发 */
  ref?: Ref<HTMLElement>;
}

/** Sider Props */
export interface LayoutSiderProps extends Omit<HTMLAttributes<HTMLElement>, "style"> {
  /** 侧边栏宽度，默认取 --layout-sider-width */
  width?: string | number;
  /** 样式扩展 */
  sx?: SxValue;
  /** 行内样式 */
  style?: CSSProperties;
  /** 额外 CSS 类名 */
  className?: string;
  /** 子元素 */
  children?: ReactNode;
  /** ref 转发 */
  ref?: Ref<HTMLElement>;
}

/** Content Props */
export interface LayoutContentProps extends Omit<HTMLAttributes<HTMLElement>, "style"> {
  /** 样式扩展 */
  sx?: SxValue;
  /** 行内样式 */
  style?: CSSProperties;
  /** 额外 CSS 类名 */
  className?: string;
  /** 子元素 */
  children?: ReactNode;
  /** ref 转发 */
  ref?: Ref<HTMLElement>;
}

/** Toc Props（右侧目录导航） */
export interface LayoutTocProps extends Omit<HTMLAttributes<HTMLElement>, "style"> {
  /** 目录导航宽度，默认取 --layout-toc-width */
  width?: string | number;
  /** 样式扩展 */
  sx?: SxValue;
  /** 行内样式 */
  style?: CSSProperties;
  /** 额外 CSS 类名 */
  className?: string;
  /** 子元素 */
  children?: ReactNode;
  /** ref 转发 */
  ref?: Ref<HTMLElement>;
}

/** Layout 复合组件类型 */
interface LayoutComponent
  extends React.ForwardRefExoticComponent<
    LayoutProps & React.RefAttributes<HTMLElement>
  > {
  Header: React.ForwardRefExoticComponent<
    LayoutHeaderProps & React.RefAttributes<HTMLElement>
  >;
  Footer: React.ForwardRefExoticComponent<
    LayoutFooterProps & React.RefAttributes<HTMLElement>
  >;
  Sider: React.ForwardRefExoticComponent<
    LayoutSiderProps & React.RefAttributes<HTMLElement>
  >;
  Content: React.ForwardRefExoticComponent<
    LayoutContentProps & React.RefAttributes<HTMLElement>
  >;
  Toc: React.ForwardRefExoticComponent<
    LayoutTocProps & React.RefAttributes<HTMLElement>
  >;
}

export declare const Header: LayoutComponent["Header"];
export declare const Footer: LayoutComponent["Footer"];
export declare const Sider: LayoutComponent["Sider"];
export declare const Content: LayoutComponent["Content"];
export declare const Toc: LayoutComponent["Toc"];

declare const Layout: LayoutComponent;
export default Layout;