import * as react from 'react';
import react__default, { PropsWithChildren, ReactElement, ReactNode, ComponentType, ElementType, FC } from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { DefaultTheme } from 'styled-components';
import { ClassValue } from 'clsx';
import { QueryClient } from '@tanstack/react-query';

declare const useBreakpoints: (breakpoints?: Breakpoints, wait?: number) => {
    breakpoint: BreakpointKey;
    width: number;
    height: number;
};

interface BreakpointContextValue {
    breakpoint: BreakpointKey;
}
declare const defaultBreakpointContextValue: BreakpointContextValue;
declare const BreakpointContext: react.Context<{
    breakpoint: BreakpointKey;
}>;

declare const useThemeMode: () => {
    themeName: string;
    isDarkTheme: () => boolean;
    themeMode: ThemeMode;
    setThemeMode: (theme: ThemeMode) => void;
    setThemeName: (name?: string | undefined) => void;
};

type ThemeMode = "dark" | "light" | "system";
interface ThemeProviderProps extends PropsWithChildren {
    defaultTheme?: ThemeMode;
    storageKey?: string;
    themeProvider?: any;
    onThemeNameChange?: (name?: string) => void;
}
type ThemeProviderState = {
    themeName: string;
    isDarkTheme: () => boolean;
    themeMode: ThemeMode;
    setThemeMode: (theme: ThemeMode) => void;
    setThemeName: (name?: string) => void;
};
declare const ThemeProviderContext: react.Context<ThemeProviderState>;
declare function ThemeModeProvider({ children, defaultTheme, storageKey, themeProvider, onThemeNameChange, ...props }: ThemeProviderProps): react_jsx_runtime.JSX.Element;

declare const useBreakpointContext: () => {
    breakpoint: BreakpointKey;
};

type BreakpointKey = "showroom" | "desktop" | "tablet" | "mobile";
type Breakpoints = Record<BreakpointKey, number>;
interface ResourceOptions extends PropsWithChildren {
    i: string;
    w: number;
    h: number;
    x: number;
    y: number;
    minW?: number;
    maxW?: number;
    minH?: number;
    maxH?: number;
    padding?: number | [number, number, number, number];
    isDraggable?: boolean;
    isResizable?: boolean;
    overflowHidden?: boolean;
    gridSize?: {
        w: number;
        h: number;
    };
    className?: string;
    style?: React.CSSProperties;
    zIndex?: number;
    data?: any;
}
type ResourceDefinition<T = ResourceOptions> = T & {};
type ResourceElement = ReactElement<ResourceOptions>;
type RenderResourcesFunction = (permissions: any) => ReactNode | Promise<ReactNode> | ResourceElement[] | Promise<ResourceElement[]>;
type ResourceChildren = ComponentType<any> | ReactElement;
type ValueOrFunValue<T> = T | ((params: {
    breakpoint?: string;
    themeMode?: ThemeMode;
    themeName?: string;
}) => T);
type ResourceChildrenProps = {
    breakpoint: string;
    colWidth: number;
    containerWrapper: ElementType<any>;
    rowHeight: number;
};
type OnLayoutChange = (id: string, newLayout: Partial<ResourceOptions>) => void;

interface BreakpointContextProviderProps extends PropsWithChildren {
    breakpoints?: Breakpoints;
}

interface ThemeContextProviderProps extends PropsWithChildren {
    theme?: DefaultTheme;
    themeName?: string;
}

interface DraggableContextProviderProps extends PropsWithChildren {
    /**
     * 是否允许容器拖拽
     *
     * @default false
     */
    isDraggable?: boolean;
    /**
     * 是否允许容器改变尺寸
     *
     * @default false
     */
    isResizable?: boolean;
}

type Component<P> = React.ComponentType<P> | React.ForwardRefExoticComponent<P> | React.FC<P> | keyof React.ReactHTML;
type CustomizeComponent = Component<any>;
type LayoutContextComponents = {
    layout?: CustomizeComponent;
    content?: CustomizeComponent;
    headerWrapper?: CustomizeComponent;
    headerInner?: CustomizeComponent;
    containerWrapper?: CustomizeComponent;
};
interface LayoutContextProviderProps extends PropsWithChildren {
    components?: LayoutContextComponents;
    themeName?: string;
    layout?: ValueOrFunValue<ResourceOptions[]>;
    /**
     * 列数量
     * 支持函数或者数字
     *
     * @example
     *
     *   <DashboardAppResponsive
          
          cols={12}
          />
  
          <DashboardAppResponsive
          
          cols={(params)=>{
              return 12
          }}
          />
  
  
     */
    cols?: ValueOrFunValue<number>;
    /**
     * 格子组件资源
     *  key是对应layout的i
     *
     * @example
     *
     * <DashboardAppResponsive
          layout={[
            {
              i:"A1"
            }
          ]}
          resource={{
            A1: TestChildA1,
           
          }}
          />
     */
    resource?: Record<string, ResourceChildren>;
    headerHeight?: ValueOrFunValue<number>;
    forceFullScreen?: ValueOrFunValue<boolean>;
    rowHeight?: ValueOrFunValue<number>;
    wrapperStyle?: React.CSSProperties;
    wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
    minHeight?: number;
}

interface CoreContextProps extends PropsWithChildren, LayoutContextProviderProps, BreakpointContextProviderProps, ThemeContextProviderProps, DraggableContextProviderProps {
    resoucreProps?: Record<string, any>;
    minHeight?: number;
}
declare const CoreContext: (props: CoreContextProps) => react_jsx_runtime.JSX.Element;

interface CoreDashboardAppResponsiveProps extends CoreContextProps, ThemeProviderProps, PropsWithChildren {
    themeName?: string;
    /**
     * 容器属性注入,所有属性将会变成组件的props
     *
     * @example
     *
     *  <DashboardAppResponsive
          resoucreProps={{
            test: 123,
          }}
            resource={{
              A1: TestChildA1,
            }}
          
          />
  
        export const TestChildA1 = (props: ResourceChildrenProps) => {
          console.log(props.test, "props");
          const { containerWrapper: ContainerWrapper } = props;
          return (
            <ContainerWrapper>
              TestChildA1 ContainerWrapper
              <button>123</button>
            </ContainerWrapper>
          );
        };
  
     */
    resoucreProps?: Record<string, any>;
    /**
     * 预设主题
     * 预设主题内可以提供 DashboardAppResponsive 组件的任意属性,但是会被顶级属性所覆盖
     *
     *@example
    
    const jfDarkTheme: DashBoardTheme = {
        themeName: "jfDarkTheme",
        titleWrapper: TitleNodeRenderer,
  
        containerWrapper: NodeContentRenderer,
        wrapperStyle: {
          backgroundColor: "#052B54",
        },
      };
    
      <DashboardAppResponsive
          
          themeProvider={jfDarkTheme}
  
          />
     */
    themeProvider?: CoreDashboardAppResponsiveProps | ((params: {
        themeMode: ThemeMode;
    }) => CoreDashboardAppResponsiveProps);
    /**
     *
     * 布局变化后的回调
     *
     * @example
     * <DashboardAppResponsive
          onLayoutChange={(id, newLayout) => {
            setPcLayout((layouts) => {
              return layouts.map((layout) => {
                if (layout.i === id) {
                  return {
                    ...layout,
                    ...newLayout,
                  };
                }
                return layout;
              });
            });
          }}
     */
    onLayoutChange?: OnLayoutChange;
    minHeight?: number;
}
declare const CoreDashboardAppResponsiveInner: (_props: CoreDashboardAppResponsiveProps) => react_jsx_runtime.JSX.Element;
declare const CoreDashboardAppResponsive: FC<CoreDashboardAppResponsiveProps>;

declare const DashboardAppResponsive: react.FC<CoreDashboardAppResponsiveProps>;

interface IDashboardItemProps extends ResourceOptions {
    minW?: number;
    maxW?: number;
    minH?: number;
    maxH?: number;
    matchBreak?: string;
    colWidth?: number;
    rowHeight?: number;
    className?: string;
    style?: react__default.CSSProperties;
    zIndex?: number;
    headerHeight?: number;
}
type IDashboardItemChldBaseProps<T = any> = T & {
    breakpoint: string;
    colWidth: number;
    rowHeight: number;
    containerWrapper: any;
    nodeContentRenderer: any;
    children?: ReactNode | undefined;
    [property: string]: any;
};
type ResourceComponent<T = any> = IDashboardItemChldBaseProps<T>;

declare const DashboardItem: (props: {
    onLayoutChange?: OnLayoutChange;
} & Partial<IDashboardItemProps>) => react_jsx_runtime.JSX.Element;

declare function cn(...inputs: ClassValue[]): string;

declare const QueryClientProvider: ({ children, queryClient, }: PropsWithChildren<{
    queryClient?: QueryClient | undefined;
}>) => react_jsx_runtime.JSX.Element;

export { BreakpointContext, type BreakpointContextValue, type BreakpointKey, type Breakpoints, CoreContext, type CoreContextProps, CoreDashboardAppResponsive, CoreDashboardAppResponsiveInner, type CoreDashboardAppResponsiveProps, DashboardAppResponsive, DashboardItem, type IDashboardItemChldBaseProps, type IDashboardItemProps, type OnLayoutChange, QueryClientProvider, type RenderResourcesFunction, type ResourceChildren, type ResourceChildrenProps, type ResourceComponent, type ResourceDefinition, type ResourceElement, type ResourceOptions, type ThemeMode, ThemeModeProvider, ThemeProviderContext, type ThemeProviderProps, type ValueOrFunValue, cn, defaultBreakpointContextValue, useBreakpointContext, useBreakpoints, useThemeMode };
