import { PropsWithChildren, ComponentType, ReactElement } from 'react';
import { DefaultTheme } from 'styled-components';

type ThemeMode = "dark" | "light" | "system";
interface ThemeProviderProps extends PropsWithChildren {
    defaultTheme?: ThemeMode;
    storageKey?: string;
    themeProvider?: any;
    onThemeNameChange?: (name?: string) => void;
}

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 ResourceChildren = ComponentType<any> | ReactElement;
type ValueOrFunValue<T> = T | ((params: {
    breakpoint?: string;
    themeMode?: ThemeMode;
    themeName?: string;
}) => T);
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;
}

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;
}

interface DashBoardTheme extends Partial<CoreDashboardAppResponsiveProps> {
    themeName: string;
}

declare const jfDarkTheme: DashBoardTheme;

declare const jfLightTheme: DashBoardTheme;

declare const jfGreenTheme: DashBoardTheme;

declare const themesMap: Record<string, DashBoardTheme>;

export { type DashBoardTheme, jfDarkTheme, jfGreenTheme, jfLightTheme, themesMap };
