import { Context } from 'react';
import { CSSObject } from 'styled-components';
import { DefaultTheme } from 'styled-components';
import { DetailedHTMLProps } from 'react';
import { FC } from 'react';
import { HTMLAttributes } from 'react';
import { IStyledComponentBase } from 'styled-components/dist/types';
import { PropsWithChildren } from 'react';
import { ReactElement } from 'react';
import { ReactNode } from 'react';
import { Substitute } from 'styled-components/dist/types';

declare type AddDollarSign<T> = {
    [K in keyof T as `$${string & K}`]: T[K];
};

declare type AddDollarSign_2<T> = {
    [K in keyof T as `$${string & K}`]: T[K];
};

declare interface addSXProps {
    sx?: SXProps;
}

export declare const AppContext: Context<AppContextProps | null>;

export declare interface AppContextProps {
    changePreview: (newPreviewProps: PreviewAdditionalProps) => void;
    changeStatusBarColor: (color: IThemePaletteKeys) => void;
    changeBgColor: (color: IThemePaletteKeys) => void;
    changeBgImage: (image: string) => void;
    changeTitle: (title: string) => void;
    changeDescription: (description: string) => void;
    setDefaultStatusBarColor: () => void;
    setDefaultBgColor: () => void;
    setDefaultBgImage: () => void;
    setDefaultTitle: () => void;
    setDefaultDescription: () => void;
    historyStatusBarColor: (step: number) => void;
    historyBgColor: (step: number) => void;
    setHistoryTitle: (step: number) => void;
    historyBgImage: (step: number) => void;
    historyDescription: (step: number) => void;
}

declare type IThemeDevice = 'default' | 'tablet' | 'mobile';

declare type IThemePaletteKeys = 'transparent' | 'black100' | 'black80' | 'black60' | 'black50' | 'black40' | 'black10' | 'black05' | 'black04' | 'blackHelena' | 'blackJanice' | 'grayJanice' | 'grayKaren' | 'grayMonica' | 'graySandra' | 'grayPatricia' | 'graySarah' | 'grayStassie' | 'grayAdriana' | 'greenGoogle' | 'grayBarbara' | 'grayStephanie' | 'grayFrances' | 'grayTina' | 'green100' | 'green50' | 'green25' | 'green10' | 'green10Background' | 'whiteStandard' | 'whiteJanice' | 'yellowGoogle' | 'yellow100' | 'yellow50' | 'yellow25' | 'yellow10' | 'yellow10Background' | 'redGoogle' | 'red100' | 'red50' | 'red25' | 'red10' | 'red10Background' | 'blueGoogle' | 'blueRest' | 'blueActive' | 'blueHover' | 'blueFocus' | 'blueBr' | 'blueKaren' | 'blueMonica' | 'violetStephanie' | 'violetJanice' | 'amnezia' | 'inherit' | 'currentColor';

declare type PreviewAdditionalProps = PreviewIsShowProps | PreviewTimeProps;

declare type PreviewDefaultProps = {
    defaultVisible?: boolean;
    content?: ReactNode;
} & {
    sxLoader?: addSXProps['sx'];
    sxChildren?: addSXProps['sx'];
};

declare interface PreviewIsShowProps extends PreviewDefaultProps {
    visible: boolean;
    minTime?: number;
}

declare interface PreviewTimeProps extends PreviewDefaultProps {
    time: number;
}

/**
 * ProviderApp component is a context context that manages various application-level states
 * such as background color, status bar color, background image, title, and description.
 * It uses several custom hooks to handle these states and provides them via the AppContext.
 *
 * @component
 *
 * @param {ProviderAppProps} props - The properties passed to the ProviderApp component.
 * @param {string} props.defaultBgColor - The default background color.
 * @param {string} props.defaultStatusBarColor - The default status bar color.
 * @param {string} [props.defaultBgImage] - The default background image.
 * @param {string} [props.defaultTitle] - The default title.
 * @param {string} [props.defaultDescription] - The default description.
 * @param {boolean} [props.isScrollOutlet] - Determines if the outlet should be scrollable.
 * @param {object} [props.footer] - The footer component and its properties.
 * @param {object} [props.notification] - The notification component and its properties.
 * @param {object} [props.header] - The header component and its properties.
 * @param {object} [props.nav] - The navigation component and its properties.
 * @param {object} [props.leftAside] - The left aside component and its properties.
 * @param {object} [props.rightAside] - The right aside component and its properties.
 * @param {React.ReactNode} props.children - The children components to be rendered inside the ProviderApp.
 *
 * @returns {JSX.Element} The rendered ProviderApp component.
 */
export declare const ProviderApp: FC<ProviderAppProps>;

export declare type ProviderAppElementProps = Partial<AddDollarSign<Pick<ProviderAppProps, 'notification' | 'header' | 'nav' | 'footer' | 'leftAside' | 'rightAside'>>>;

export declare const ProviderAppOutlet: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Partial<AddDollarSign_2<Pick<ProviderAppProps, "footer" | "header" | "nav" | "isScrollOutlet" | "notification" | "leftAside" | "rightAside">>>>> & string;

export declare const ProviderAppOutletChildren: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, AddDollarSign_2<Pick<ProviderAppProps, "main" | "isScrollOutlet">>>> & string;

export declare type ProviderAppOutletChildrenProps = AddDollarSign<Pick<ProviderAppProps, 'main' | 'isScrollOutlet'>>;

export declare const ProviderAppOutletFooter: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, Partial<AddDollarSign_2<Pick<ProviderAppProps, "footer" | "header" | "nav" | "isScrollOutlet" | "notification" | "leftAside" | "rightAside">>>>> & string;

export declare const ProviderAppOutletHeader: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, Partial<AddDollarSign_2<Pick<ProviderAppProps, "footer" | "header" | "nav" | "isScrollOutlet" | "notification" | "leftAside" | "rightAside">>>>> & string;

export declare const ProviderAppOutletLeftAside: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, Partial<AddDollarSign_2<Pick<ProviderAppProps, "footer" | "header" | "nav" | "isScrollOutlet" | "notification" | "leftAside" | "rightAside">>>>> & string;

export declare const ProviderAppOutletNav: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, Partial<AddDollarSign_2<Pick<ProviderAppProps, "footer" | "header" | "nav" | "isScrollOutlet" | "notification" | "leftAside" | "rightAside">>>>> & string;

export declare const ProviderAppOutletNotification: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, Partial<AddDollarSign_2<Pick<ProviderAppProps, "footer" | "header" | "nav" | "isScrollOutlet" | "notification" | "leftAside" | "rightAside">>>>> & string;

export declare type ProviderAppOutletProps = Partial<AddDollarSign<Pick<ProviderAppProps, 'isScrollOutlet' | 'notification' | 'header' | 'nav' | 'footer' | 'leftAside' | 'rightAside'>>>;

export declare const ProviderAppOutletRightAside: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, Partial<AddDollarSign_2<Pick<ProviderAppProps, "footer" | "header" | "nav" | "isScrollOutlet" | "notification" | "leftAside" | "rightAside">>>>> & string;

export declare interface ProviderAppProps extends PropsWithChildren {
    defaultPreview?: PreviewAdditionalProps;
    defaultBgColor: IThemePaletteKeys;
    defaultStatusBarColor: IThemePaletteKeys;
    defaultBgImage?: string;
    defaultTitle: string;
    defaultDescription: string;
    isScrollOutlet?: boolean;
    notification?: {
        component: ReactElement;
        length?: ScreenWidthProps<string | null>;
        zIndex?: number;
    };
    header?: {
        component: ReactElement;
        length?: ScreenWidthProps<string | null>;
        zIndex?: number;
    };
    nav?: {
        component: ReactElement;
        length?: ScreenWidthProps<string | null>;
        zIndex?: number;
    };
    footer?: {
        component: ReactElement;
        length?: ScreenWidthProps<string | null>;
        zIndex?: number;
    };
    leftAside?: {
        component: ReactElement;
        length?: ScreenWidthProps<string | null>;
        isTopHeader?: boolean;
        isTopFooter?: boolean;
        isTopNav?: boolean;
        zIndex?: number;
    };
    rightAside?: {
        component: ReactElement;
        length?: ScreenWidthProps<string | null>;
        isTopHeader?: boolean;
        isTopFooter?: boolean;
        isTopNav?: boolean;
        zIndex?: number;
    };
    main?: {
        zIndex?: number;
    };
}

export declare const ProviderAppWrapper: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ProviderAppWrapperProps>> & string;

export declare interface ProviderAppWrapperProps {
    $bgColor: ProviderAppProps['defaultBgColor'];
    $bgImage: ProviderAppProps['defaultBgImage'] | null;
}

declare type ScreenWidthProps<T> = {
    [K in IThemeDevice]?: T;
};

declare type SXProps = ({
    default: CSSObject;
} & {
    [K in IThemeDevice]?: CSSObject;
}) | ((theme: DefaultTheme) => {
    default: CSSObject;
} & {
    [K in IThemeDevice]?: CSSObject;
});

/**
 * Custom hook to access the AppContext.
 */
export declare const useApp: () => AppContextProps;

export declare const useBgColor: (defaultColor: IThemePaletteKeys) => {
    bgColor: IThemePaletteKeys;
    changeBgColor: (color: IThemePaletteKeys) => void;
    historyBgColor: (steps: number) => void;
    setDefaultBgColor: () => void;
    bgColorIndex: number;
};

export declare const useBgImage: (defaultImage: string | null) => {
    bgImage: string | null;
    changeBgImage: (image: string | null) => void;
    historyBgImage: (steps: number) => void;
    setDefaultBgImage: () => void;
    bgImageIndex: number;
};

export declare const useDescription: (defaultDescription: string) => {
    description: string;
    changeDescription: (newDescription: string) => void;
    historyDescription: (steps: number) => void;
    setDefaultDescription: () => void;
    descriptionIndex: number;
};

export declare const useStatusBarColor: (defaultColor: IThemePaletteKeys) => {
    statusBarColor: IThemePaletteKeys;
    changeStatusBarColor: (color: IThemePaletteKeys) => void;
    historyStatusBarColor: (steps: number) => void;
    setDefaultStatusBarColor: () => void;
    statusBarColorIndex: number;
};

export { }