import * as _typhonjs_fvtt_standard_store_fvtt_settings from '@typhonjs-fvtt/standard/store/fvtt/settings';
import { SvelteComponent } from 'svelte';

/**
 * `TJSSettingsEdit` provides the main Svelte component to display and modify settings registered with
 * `TJSGameSettingsWithUI`. Refer to the documentation in `TJSGameSettings.register` and
 * `TJSGameSettings.registerAll`. Adding custom defined sections is accomplished with
 * `TJSGameSettingsWithUI.uiControl.addSection`. You must pass an instance of `TJSGameSettingsWithUI` as the
 * `settings` prop.
 *
 * Note: to group settings into specific folders instead of a single top level section use the `folder` option when
 * registering settings with TJSGameSettings. Also, please refer to the extra folder options described by
 * `TJSGameSettingsWithUI.uiControl.addSection`.
 *
 * The other prop `options` is an object instance defined by `TJSSettingsCreateOptions`. This allows you to
 * associate a `TJSWebStorage` instance that automatically will track open / closed state of any section
 * folders configured along with the scrolling position of the scrollbar.
 *
 * `TJSSettingsEdit` supports two additional named slots `settings-header` and `settings-footer` allowing you to
 * set Svelte components as a fixed header and / or footer to the main scrollable settings content.
 *
 * When `TJSSettingsEdit` is displayed the UI display data is generated from `TJSGameSettingsWithUI.uiControl`
 * automatically. When the `TJSSettingsEdit` component is destroyed any settings registered for UI display will be
 * checked for `requiresReload` setting option. If the setting has changed while `TJSSettingsEdit` is displayed a
 * modal dialog is opened to inform the user that a setting changed that requires reloading.
 *
 * If you need an easy to use slotted component that allows swapping from the main slot and `TJSSettingsEdit` please
 * refer to {@link TJSSettingsSwap}.
 *
 * ### CSS Variables
 *
 * CSS variables available include the following options:
 *
 * ```
 * Top level 'main' element:
 * --tjs-settings-section-background - none
 *
 * Scrollable div element:
 * --tjs-settings-padding - 0
 *
 * Each section element for a grouping of settings:
 * --tjs-settings-section-background - none
 * --tjs-settings-section-border - none
 * --tjs-settings-section-border-radius - 0
 * --tjs-settings-section-margin-bottom - 0.75em
 * --tjs-settings-section-padding - 0.5em
 * ```
 */
declare class TjsSettingsEdit extends SvelteComponent<
  TjsSettingsEdit.Props,
  TjsSettingsEdit.Events,
  TjsSettingsEdit.Slots
> {}

/** Event / Prop / Slot type aliases for {@link TjsSettingsEdit | associated component}. */
declare namespace TjsSettingsEdit {
  /** Props type alias for {@link TjsSettingsEdit | associated component}. */
  export type Props = {
    /** @type {import('@typhonjs-fvtt/standard/store/fvtt/settings').TJSSettingsCreateOptions} */
    options?: _typhonjs_fvtt_standard_store_fvtt_settings.TJSSettingsCreateOptions;
    /** @type {import('@typhonjs-fvtt/standard/store/fvtt/settings').TJSGameSettingsWithUI} */
    settings?: _typhonjs_fvtt_standard_store_fvtt_settings.TJSGameSettingsWithUI;
    /**
     * Optional inline styles applied to the main element; useful for setting CSS variables.
     *
     * @type {object}
     */
    styles?: object;
  };
  /** Events type alias for {@link TjsSettingsEdit | associated component}. */
  export type Events = { [evt: string]: CustomEvent<any> };
  /** Slots type alias for {@link TjsSettingsEdit | associated component}. */
  export type Slots = {
    'settings-header': { settings: any; options: any; uiSettings: any };
    'settings-footer': { settings: any; options: any; uiSettings: any };
  };
}

/**
 * `TJSSettingsSwap` provides a convenience component to swap a main slotted component with `TJSSettingsEdit`.
 *
 * The component props are the same and documented in {@link TJSSettingsEdit}. The only difference is that to
 * support slot forwarding for `TJSSettingsEdit` is that you define the `settings-header` and `settings-footer` slots
 * inside the `TJSSettingsSwap` content.
 *
 * Controlling the swap state is accessible from `TJSGameSettingsWithUI.uiControl.showSettings` accessor
 * (get or set). This allows for instance the creation of an app header button to swap between the main slotted
 * component and `TJSSettingsEdit`.
 *
 */
declare class TjsSettingsSwap extends SvelteComponent<
  TjsSettingsSwap.Props,
  TjsSettingsSwap.Events,
  TjsSettingsSwap.Slots
> {}

/** Event / Prop / Slot type aliases for {@link TjsSettingsSwap | associated component}. */
declare namespace TjsSettingsSwap {
  /** Props type alias for {@link TjsSettingsSwap | associated component}. */
  export type Props = {
    /** @type {import('@typhonjs-fvtt/standard/store/fvtt/settings').TJSSettingsCreateOptions} */
    options?: _typhonjs_fvtt_standard_store_fvtt_settings.TJSSettingsCreateOptions;
    /** @type {import('@typhonjs-fvtt/standard/store/fvtt/settings').TJSGameSettingsWithUI} */
    settings?: _typhonjs_fvtt_standard_store_fvtt_settings.TJSGameSettingsWithUI;
  };
  /** Events type alias for {@link TjsSettingsSwap | associated component}. */
  export type Events = { [evt: string]: CustomEvent<any> };
  /** Slots type alias for {@link TjsSettingsSwap | associated component}. */
  export type Slots = {
    'settings-header': { slot: string; settings: any; options: any; uiSettings: any };
    'settings-footer': { slot: string; settings: any; options: any; uiSettings: any };
    default: {};
  };
}

/**
 * @privateRemarks
 * TODO: Add description
 *
 */
declare class TjsThemeEditor extends SvelteComponent<
  TjsThemeEditor.Props,
  TjsThemeEditor.Events,
  TjsThemeEditor.Slots
> {}

/** Event / Prop / Slot type aliases for {@link TjsThemeEditor | associated component}. */
declare namespace TjsThemeEditor {
  /** Props type alias for {@link TjsThemeEditor | associated component}. */
  export type Props = { themeStore?: any };
  /** Events type alias for {@link TjsThemeEditor | associated component}. */
  export type Events = { [evt: string]: CustomEvent<any> };
  /** Slots type alias for {@link TjsThemeEditor | associated component}. */
  export type Slots = {};
}

export { TjsSettingsEdit as TJSSettingsEdit, TjsSettingsSwap as TJSSettingsSwap, TjsThemeEditor as TJSThemeEditor };