import { AllowedComponentProps } from 'vue';
import { Component } from 'vue';
import { ComponentCustomProps } from 'vue';
import { ComponentOptionsMixin } from 'vue';
import { ComputedOptions } from 'vue';
import type { ComputedRef } from 'vue';
import type { CSSInterpolation } from '@emotion/css';
import type { CustomColor } from '@material/material-color-utilities';
import type { CustomColorGroup } from '@material/material-color-utilities';
import { DefineComponent } from 'vue';
import { ExtractPropTypes } from 'vue';
import { h } from 'vue';
import { MethodOptions } from 'vue';
import { PropType } from 'vue';
import type { Ref } from 'vue';
import { RendererElement } from 'vue';
import { RendererNode } from 'vue';
import type { Rgba } from '@material/material-color-utilities';
import { Scheme } from '@material/material-color-utilities';
import type { Theme as Theme_2 } from '@material/material-color-utilities';
import { VNode } from 'vue';
import { VNodeProps } from 'vue';

export declare type AcceptableColor = keyof ThemeSchemes | ThemeCallBack | string;

export declare interface AdditionalThemeSchemes {
    light: NewSchemes;
    dark: NewSchemes;
}

declare type Color<T extends string | number> = Record<T, string>;

export declare interface Colors {
    red: ColorWithExtension;
    pink: ColorWithExtension;
    purple: ColorWithExtension;
    deepPurple: ColorWithExtension;
    indigo: ColorWithExtension;
    blue: ColorWithExtension;
    lightBlue: ColorWithExtension;
    cyan: ColorWithExtension;
    teal: ColorWithExtension;
    green: ColorWithExtension;
    lightGreen: ColorWithExtension;
    lime: ColorWithExtension;
    yellow: ColorWithExtension;
    amber: ColorWithExtension;
    orange: ColorWithExtension;
    deepOrange: ColorWithExtension;
    brown: ColorWithoutExtension;
    grey: ColorWithoutExtension;
    blueGrey: ColorWithoutExtension;
}

declare type ColorWithExtension = Color<FusionColorLevel | FusionColorExtensionLevel>;

declare type ColorWithoutExtension = Color<FusionColorLevel>;

export declare class ComponentSchemes {
    private readonly props;
    static light(color: string, theme: Theme): ComponentSchemes;
    static dark(color: string, theme: Theme): ComponentSchemes;
    private static schemesFromTheme;
    private static colorSet;
    private constructor();
    get primary(): string;
    get onPrimary(): string;
    get primaryContainer(): string;
    get onPrimaryContainer(): string;
    get secondary(): string;
    get onSecondary(): string;
    get secondaryContainer(): string;
    get onSecondaryContainer(): string;
    get tertiary(): string;
    get onTertiary(): string;
    get tertiaryContainer(): string;
    get onTertiaryContainer(): string;
    get surfaceDim(): string;
    get surface(): string;
    get surfaceBright(): string;
    get surfaceContainerLowest(): string;
    get surfaceContainerLow(): string;
    get surfaceContainer(): string;
    get surfaceContainerHigh(): string;
    get surfaceContainerHighest(): string;
    get onSurface(): string;
    get onSurfaceVariant(): string;
    get outline(): string;
    get outlineVariant(): string;
}

declare type ComponentSizes = 'small' | 'medium' | 'large';

export declare const createCustomPalettes: (customColors: CustomColor[]) => any;

/**
 * The hook to create the theme
 * @param {string} source The source color of the theme, the value should be "Hex"
 * @param {ThemeOptions} options The object to customize the theme
 * @returns {Ref<Theme> } Theme object
 */
export declare const createTheme: (source?: string, options?: ThemeOptions) => Ref<Theme>;

declare type CreateTransition = (attrs: string[], options: {
    duration?: number;
    timingFunction?: string;
}) => string;

declare type Duration = Record<DurationLevel, number>;

declare type DurationLevel = 50 | 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500 | 550 | 600 | 700 | 800 | 900 | 1000;

export declare type Elevations = string[];

declare type FusionColorExtensionLevel = 'A100' | 'A200' | 'A400' | 'A700';

declare type FusionColorLevel = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;

export declare type GenerateCustomSchemes<T extends string> = Record<GenerateCustomSchemesKeys<T>, string>;

declare type GenerateCustomSchemesKeys<T extends string> = T | `on${Capitalize<T>}` | `${T}Container` | `on${Capitalize<T>}Container`;

/**
 * Inject the schemes to the target element
 * @param {'root' | 'host'} target The target element to inject the schemes
 * root: the root element (html) of the document
 * host: the current element (the theme provider component)
 * @param {ParsedSchemes} lightSchemes The light schemes
 * @param {ParsedSchemes} darkSchemes The dark schemes
 * @param {Theme} theme The theme object
 */
export declare const injectJSS: (target: 'root' | 'host', lightSchemes: ParsedSchemes, darkSchemes: ParsedSchemes, theme: Theme) => string | undefined;

/**
 * Merge the parsed schemes into one object
 * @param {ParsedSchemes[]} args The parsed schemes
 * @returns {ParsedSchemes} The merged parsed schemes
 */
export declare const mergeParsedSchemes: (...args: ParsedSchemes[]) => ParsedSchemes;

declare interface Motion {
    create: CreateTransition;
    duration: Duration;
    timingFunction: TransitionTimingFunction;
}

export declare interface NewSchemes {
    surfaceDim: number;
    surface: number;
    surfaceBright: number;
    surfaceContainerLowest: number;
    surfaceContainerLow: number;
    surfaceContainer: number;
    surfaceContainerHigh: number;
    surfaceContainerHighest: number;
    onSurface: number;
    onSurfaceVariant: number;
    outline: number;
    outlineVariant: number;
}

/**
 * The hrlper function to create the new scheme according to latest version Material Design Color System
 * expecially the "Surface" series
 * @link https://m3.material.io/styles/color/static/baseline#690f18cd-d40f-4158-a358-4cfdb3a32768
 * @param {DynamicTheme} dynamicTheme The dynamic theme object
 */
export declare const newSchemes: (dynamicTheme: Theme_2) => AdditionalThemeSchemes;

export declare const parseCustomSchemes: (scheme: CustomColorGroup[], mode: ThemeMode) => ParsedSchemes;

export declare interface ParsedNewSchemes {
    schemes: Record<keyof NewSchemes, string>;
    styles: Record<string, string>;
}

export declare const parsedNewSchemes: (scheme: NewSchemes) => ParsedNewSchemes;

export declare interface ParsedSchemes {
    schemes: Schemes | SeveritySchemes;
    styles: Record<string, string>;
}

export declare const parsePalettes: (palette: Theme_2['palettes']) => ThemePalettes;

export declare const parseSchemes: (scheme: Scheme) => ParsedSchemes;

declare type RenderTypes = Parameters<typeof h>;

/**
 * The function converts hex color to rgba color
 * @param {string} hex The hex color
 * @return {Rgba} The rgba color obj
 */
export declare const rgbaFromHex: (hex: string) => Rgba;

export declare type Schemes = Omit<Record<keyof Scheme, string>, 'toJSON'>;

export declare type SeveritySchemes = GenerateCustomSchemes<'success' | 'info' | 'warning' | 'error'>;

export declare type States = Record<StateType, number | string>;

export declare type StateType = 'hover' | 'pressed' | 'dragged' | 'focus' | 'disabled';

export declare const styled: (comp: Component | string, props?: RenderTypes[1]) => (style: TemplateStringsArray | ((theme: Theme) => CSSInterpolation), ...args: CSSInterpolation[]) => DefineComponent<{}, () => JSX.Element, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}, {}>;

export declare class Theme {
    mode: ThemeMode;
    readonly schemes: ThemeSchemes;
    readonly colors: Colors;
    readonly states: States;
    readonly elevations: Elevations;
    readonly typography: Typography;
    readonly zIndex: ZIndex;
    readonly motion: Motion;
    readonly palettes: ThemePalettes;
    readonly inject?: string;
    readonly target: 'root' | 'host';
    readonly _lightSchemes: ParsedSchemes;
    readonly _darkSchemes: ParsedSchemes;
    constructor(schemes: Schemes & SeveritySchemes, palettes: ThemePalettes, mode: ThemeMode | undefined, lightSchemes: ParsedSchemes, darkSchemes: ParsedSchemes, target: 'root' | 'host');
    toggleMode(): void;
}

export declare type ThemeCallBack = (theme: Theme) => string;

export declare interface ThemeConfig {
    mode?: ThemeMode;
    schemes?: Partial<ThemeSchemes>;
    customColors?: CustomColor[];
}

export declare type ThemeMode = 'light' | 'dark';

export declare interface ThemeOptions {
    target: 'root' | 'host';
    config?: ThemeConfig;
}

export declare type ThemePalettes = Record<keyof Theme_2['palettes'], Record<ThemePalettesTones, string>> & {
    [k: string]: Record<ThemePalettesTones, string>;
};

export declare type ThemePalettesTones = '0' | '10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90' | '95' | '99' | '100';

export declare const ThemeProvider: DefineComponent<{
    theme: {
        type: PropType<Theme>;
        required: true;
    };
    component: {
        type: PropType<string | Component<any, any, any, ComputedOptions, MethodOptions>>;
        default: string;
    };
    watcher: {
        type: FunctionConstructor;
    };
}, () => JSX.Element | VNode<RendererNode, RendererElement, {
    [key: string]: any;
}>[] | undefined, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "update:theme"[], "update:theme", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
    theme: {
        type: PropType<Theme>;
        required: true;
    };
    component: {
        type: PropType<string | Component<any, any, any, ComputedOptions, MethodOptions>>;
        default: string;
    };
    watcher: {
        type: FunctionConstructor;
    };
}>> & {
    "onUpdate:theme"?: ((...args: any[]) => any) | undefined;
}, {
    component: string | Component<any, any, any, ComputedOptions, MethodOptions>;
}, {}>;

export declare type ThemeSchemes = Schemes & SeveritySchemes;

declare type TransitionTimingFunction = Record<TransitionTimingFunctionKey, string>;

declare type TransitionTimingFunctionKey = 'easing-standard' | 'easing-linear' | 'easing-standard-accelerate' | 'easing-standard-decelerate' | 'easing-emphasized';

export declare type Typography = TypographyDefaultConfig & Record<TypographyWithoutSize, TypographyProp> & Record<TypographyWithSize, Record<ComponentSizes, TypographyProp>>;

declare interface TypographyDefaultConfig {
    fontFamily: string;
    htmlFontSize: number;
    fontSize: number;
    pxToRem: (size: number) => string;
}

export declare type TypographyMap = Record<TypographyType, string>;

export declare const typographyMapping: TypographyMap;

export declare interface TypographyProp {
    fontFamily: string;
    fontWeight: number;
    fontSize: string;
    fontStyle: string;
    letterSpacing: string;
    lineHeight: string;
    textTransform: string;
}

export declare type TypographyType = TypographyWithoutSize | TypographyWithSize;

export declare type TypographyWithoutSize = (typeof typographyWithoutSize)[number];

export declare const typographyWithoutSize: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];

export declare type TypographyWithSize = (typeof typographyWithSize)[number];

export declare const typographyWithSize: readonly ["title", "body", "label"];

/**
 * The function returns the pair of valuable [color, onColor] from props.color
 * The props.color can be any key in theme.schemes, a function, or a hex color
 * (e.g. "primary" | "onPrimary") | (theme: Theme) => string | "string" (e.g. "red") | HexColor (e.g. "#fff")
 * @param {T extends { [k: string]: AcceptableColor | any }} props The props of component
 * @param {keyof T} key The key of props
 * @return {Ref<null>[] | ComputedRef<string>[]} The pair of color and onColor, [color, onColor]
 */
export declare const useColor: <T extends {
    [k: string]: any;
}>(props: T, key: keyof T) => Ref<null>[] | ComputedRef<string>[];

/**
 * The function to generate the dynamic color for the component according to input color.
 *
 * @param {AcceptableColor} color - The source color to generate the dynamic color.
 * @return {{ light: ComponentSchemes; dark: ComponentSchemes }}
 */
export declare const useDynamicColor: (color: AcceptableColor) => Record<ThemeMode, Omit<ComponentSchemes, 'props'>> & {
    source: string;
};

/**
 * Calculate the RGB value of the color.
 * TIPS: The color should comes from the scheme of the theme or the component.
 */
export declare const useDynamicRgb: (color: string) => string;

/**
 * The function to compute color from props
 * The props.color can be "primary" | "secondary" | "tertiary" | "error" | (theme: Theme) => string | "string"
 * Use this function to get the final color value
 * @param {T extends { [k: string]: AcceptableColor | any }} props The props of component
 * @param {keyof T | undefined | null} key The key of props
 * Set the key to null or undefined to use default color
 * @return Return the computed string. The value can be CSS variable or color in hex
 */
export declare const useRgbColor: <T extends {
    [k: string]: any;
}>(props: T, key: keyof T | null | undefined) => Ref<null>[] | ComputedRef<string>[];

/**
 * Get the current theme object
 * @returns {Ref<Theme> } Theme object
 */
export declare const useTheme: (mode?: ThemeMode) => Ref<Theme>;

/**
 * The hook to provide theme obj to the child components
 * @param {Ref<Theme>} theme The theme obj
 */
export declare const useThemeProvider: (theme: Ref<Theme>) => void;

declare interface ZIndex {
    appBar: number;
    drawer: number;
    fab: number;
    stepper: number;
    modal: number;
}


export * from "@emotion/css";

export { }