import { SystemConfig as ChakraSystemConfig } from "@chakra-ui/react";
import { ComponentType } from "react";
import { type ApiMethods, type ColorModeValue } from "./api";
import { ApplicationMetadata } from "./metadata";
/**
 * Options for the {@link createCustomElement} function.
 */
export interface CustomElementOptions {
    /**
     * Rendered UI component.
     */
    component?: ComponentType<Record<string, string>>;
    /**
     * Application metadata (packages, services etc.).
     * This is usually autogenerated by importing the virtual `"open-pioneer:app"` module.
     */
    appMetadata?: ApplicationMetadata;
    /**
     * Application defined configuration.
     *
     * This option can be used to override default properties of the application's packages.
     *
     * All instances of the web component will share this static configuration.
     */
    config?: ApplicationConfig;
    /**
     * Chakra styled system object.
     *
     * Used to configure chakra's theme.
     */
    chakraSystemConfig?: ChakraSystemConfig;
    /**
     * Advanced configuration that alters the behavior of the custom element.
     */
    advanced?: AdvancedCustomElementOptions;
    /**
     * Function to provide additional application defined configuration parameters.
     *
     * Compared to {@link config}, this function receives a context object
     * that allows the developer to provide dynamic properties on a per-application instance basis.
     *
     * Parameters returned by this function take precedence over the ones defined by {@link config}.
     */
    resolveConfig?(ctx: ConfigContext): Promise<ApplicationConfig | undefined>;
}
/**
 * A context object that is passed to the `resolveProperties` function.
 */
export interface ConfigContext {
    /**
     * The application's host element.
     */
    hostElement: HTMLElement;
    /**
     * Defined when the application forcefully restarts with new options.
     */
    overrides: ApplicationOverrides | undefined;
    /**
     * Returns an attribute from the application's root node.
     */
    getAttribute(name: string): string | undefined;
}
/**
 * Application overrides are defined when the is explicitly being restarted with new options.
 *
 * Options set through overrides cannot be overwritten by the `resolveConfig` hook.
 */
export interface ApplicationOverrides {
    /**
     * The new application locale.
     */
    locale?: string;
    /**
     * The new color mode.
     */
    colorMode?: ColorModeValue | "system";
    /**
     * The new used chakra system config.
     */
    chakraSystemConfig?: ChakraSystemConfig;
}
/**
 * Runtime application configuration.
 */
export interface ApplicationConfig {
    /**
     * Set this value to a locale string (e.g. "en") to for the application's locale.
     * The default behavior is to choose an appropriate locale for the current user based
     * on the browser's settings.
     *
     * The locale must be supported by the application.
     */
    locale?: string | undefined;
    /**
     * Configures the application's initial color mode.
     *
     * Use `system` to use the user's preferred color mode, derived from the browser or operating system.
     *
     * Default: `light`.
     */
    colorMode?: ColorModeValue | "system";
    /**
     * Properties specified here will override default properties of the application's packages.
     */
    properties?: ApplicationProperties | undefined;
    /**
     * Chakra styled system object.
     *
     * Used to configure chakra's theme.
     *
     * NOTE: This setting has priority over {@link CustomElementOptions.chakraSystemConfig}.
     */
    chakraSystemConfig?: ChakraSystemConfig;
}
/**
 * Allows the application to override default properties in all packages.
 *
 * Properties are typed when the package contains type definitions for them.
 */
export interface ApplicationProperties {
    /**
     * Key: the name of the package.
     * Value: A record of configuration properties (key/value pairs).
     *
     * Properties will override default property values in the package.
     */
    [packageName: string]: Record<string, unknown>;
}
/**
 * The interface implemented by web components produced via {@link createCustomElement}.
 */
export interface ApplicationElement extends HTMLElement {
    /**
     * Resolves to the element's API when the application has started.
     *
     * The API exposed by an application can be defined by implementing an {@link ApiExtension}.
     * For more details, open the documentation of the `@open-pioneer/integration` package.
     */
    when(): Promise<ApiMethods>;
}
/**
 * Advanced configuration that alters the behavior of the custom element.
 *
 * See {@link createCustomElement}.
 */
export interface AdvancedCustomElementOptions {
    /**
     * Enables or disables the [shadow root](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot) inside the application's web component.
     *
     * Default: `true`.
     *
     * By default, trails applications use a shadow root to avoid conflicts (e.g. styles) with other parts of the site where the application may be embedded.
     *
     * Applications that use the entire browser viewport may not need this feature, since there may be no "other" parts that may conflict with the app.
     * In this case, you can disable the shadow root by setting this property to `false`.
     * In general, UI components used by the app (e.g. from Chakra UI) should work just as well when disabling the shadow root.
     * If you notice any problems, please file an issue.
     *
     * If you are developing UI components that are meant to be used in other applications, you should always use a shadow root to
     * ensure that your components work in that setting.
     */
    enableShadowRoot?: boolean;
}
/**
 * The class returned by a call to {@link createCustomElement}.
 */
export interface ApplicationElementConstructor {
    new (): ApplicationElement;
}
/**
 * Creates a new custom element class (web component) that can be registered within a DOM.
 *
 * @example
 * ```ts
 * import * as appMetadata from "open-pioneer:app";
 *
 * const CustomElementClazz = createCustomElement({
 *   component: <div>Hello World!</div>,
 *   appMetadata
 * });
 * customElements.define("sample-element", CustomElementClazz);
 * ```
 */
export declare function createCustomElement(options: CustomElementOptions): ApplicationElementConstructor;