import { TJSGameSettings } from '@typhonjs-fvtt/runtime/svelte/store/fvtt/settings';
import { Writable, Readable, Subscriber, Unsubscriber } from 'svelte/store';
import { MinimalWritable } from '@typhonjs-fvtt/runtime/svelte/store/util';
import { WebStorage } from '@typhonjs-fvtt/runtime/svelte/store/web-storage';
import { TJSSvelte } from '@typhonjs-fvtt/runtime/svelte/util';
import { TJSStyleManager } from '@typhonjs-fvtt/runtime/util/dom/style';

/**
 * Extends {@link TJSGameSettings} with UI control for working with
 * {@link #standard/component/fvtt/settings!TJSSettingsEdit} and
 * {@link #standard/component/fvtt/settings!TJSSettingsSwap}
 * components. Instead of extending `TJSGameSettings` simply extend `TJSGameSettingsWithUI` instead when creating
 * reactive game settings that utilize the above components.
 *
 * There are additional game settings options for separating settings into folders. Please see
 * {@link TJSGameSettingsWithUI.Options.ExtraProps}.
 */
declare class TJSGameSettingsWithUI extends TJSGameSettings<TJSGameSettingsWithUI.Options.ExtraProps> {
  #private;
  /**
   * Creates the TJSGameSettingsWithUI instance.
   *
   * @param namespace - The namespace for all settings.
   */
  constructor(namespace: string);
  register(setting: TJSGameSettingsWithUI.Options.GameSetting): void;
  /**
   * @returns The associated UIControl.
   */
  get uiControl(): TJSGameSettingsWithUI.UIControl;
}
declare namespace TJSGameSettingsWithUI {
  namespace Data {
    type Folder = {
      label: string;
      settings: UISetting.Data[];
      store?: MinimalWritable<boolean>;
    };
    interface Section extends TJSSvelte.Config.Embed {
      folder?: SectionFolder;
      styles?: {
        [key: string]: string | null;
      };
    }
    type SectionFolder = {
      label: string;
      store?: MinimalWritable<boolean>;
      summaryEnd?: TJSSvelte.Config.Embed;
      styles?: {
        [key: string]: string | null;
      };
    };
  }
  type Data = {
    /**
     * Sorted folders with associated settings and label.
     */
    folders: Data.Folder[];
    /**
     * Top level settings data.
     */
    topLevel: UISetting.Data[];
    /**
     * Custom sections.
     */
    sections: Data.Section[];
    /**
     * The store for `applyScrolltop`.
     */
    storeScrollbar: Writable<number>;
    /**
     * The bound destroy callback function for received of `TJSGameSettingsWithUI.Data` instance.
     */
    destroy?: Function;
  };
  namespace Options {
    type Create = {
      /**
       * Defines the effects added to TJS components; ripple by default.
       */
      efx?: string;
      /**
       * TRL WebStorage (session) instance to serialize folder state and scrollbar position.
       */
      storage?: WebStorage;
    };
    interface CustomSection extends TJSSvelte.Config.Embed {
      /**
       * Inline styles for the section element.
       */
      styles?: {
        [key: string]: string | null;
      };
      /**
       * A folder label or CustomSectionFolder object.
       */
      folder?: string | CustomSectionFolder;
    }
    type CustomSectionFolder = {
      /**
       * The folder label.
       */
      label: string;
      /**
       * A Svelte component config object defining TJSSvgFolder summary end component.
       */
      summaryEnd?: TJSSvelte.Config.Embed;
      /**
       * Inline styles for the `TJSSvgFolder`; useful for setting CSS variables.
       */
      styles?: {
        [key: string]: string | null;
      };
    };
    /**
     * Defines extra props that are available to set for game setting with UI options and data.
     */
    interface ExtraProps {
      /**
       * The name of the `TJSSvgFolder` to put this setting in to group them.
       */
      folder?: string;
    }
    /**
     * Defines the game setting with UI options for {@link TJSGameSettings.register}.
     */
    interface GameSetting extends TJSGameSettings.Options.GameSetting<ExtraProps> {}
  }
  namespace UISetting {
    type Data = {
      id: string;
      namespace: string;
      folder?: string;
      key: string;
      name: string;
      hint: string;
      type: string;
      componentType: string;
      filePicker?: string;
      range?: {
        min: number;
        max: number;
        step: number;
      };
      store: MinimalWritable<unknown>;
      initialValue: any;
      scope: 'client' | 'world';
      requiresReload?: boolean;
      buttonData?: ButtonData;
      inputData?: InputData;
      selectData?: SelectData;
    };
    type ButtonData = {
      efx?: Function;
      icon: string;
      styles?: {
        [key: string]: string | null;
      };
      title: string;
    };
    type InputData = {
      efx?: Function;
      store: MinimalWritable<unknown>;
      type: string;
    };
    type SelectData = {
      efx?: Function;
      options: {
        value: string;
        label: string;
      }[];
      store: MinimalWritable<unknown>;
      type: string;
    };
  }
  /**
   * Controls preparation and processing of registered game settings w/ TJSGameSettings. Game settings are parsed
   * for UI display by TJSSettingsEdit. The store `showSettings` is utilized in TJSSettingsSwap component to provide
   * an easy way to flip between settings component or any main slotted component.
   */
  interface UIControl {
    /**
     * @returns Returns the managed stores.
     */
    get stores(): {
      showSettings: Readable<boolean>;
    };
    /**
     * @returns Current `showSettings` state.
     */
    get showSettings(): boolean;
    /**
     * Sets current `showSettings` state.
     *
     * @param showSettings - New `showSettings` state.
     */
    set showSettings(showSettings: boolean);
    /**
     * Adds a custom section / folder defined by the provided TJSSettingsCustomSection options object.
     *
     * @param options - The configuration object for the custom section.
     */
    addSection(options: Options.CustomSection): void;
    /**
     * Creates the UISettingsData object by parsing stored settings in
     *
     * @param [options] - Optional parameters.
     *
     * @returns Parsed UI settings data.
     */
    create(options?: Options.Create): TJSGameSettingsWithUI.Data;
    /**
     * Convenience method to swap `showSettings`.
     *
     * @returns New `showSettings` state.
     */
    swapShowSettings(): boolean;
  }
}

/**
 * Must be constructed from a TJSGameSettings instance `init` / initialize method called from the `ready` Foundry VTT
 * hook.
 */
declare class TJSThemeStore {
  #private;
  /**
   * @param options - Options
   */
  constructor(options: TJSThemeStore.Options);
  /**
   * @returns A readable store of all components.
   */
  get components(): Readable<TJSThemeStore.Component[]>;
  /**
   * @returns All property stores.
   */
  get properties(): {
    [key: string]: Writable<string | null>;
  };
  /**
   * Sets the theme store with new data.
   *
   * @param themeData -
   *
   * @returns This theme store instance.
   */
  set(themeData: TJSThemeStore.Data): this;
  /**
   * @param handler - Callback function that is invoked on update / changes. Receives copy of the theme data.
   *
   * @returns Unsubscribe function.
   */
  subscribe(handler: Subscriber<TJSThemeStore.Data>): Unsubscriber;
}
declare namespace TJSThemeStore {
  type Component = {
    /**
     * An optional default value for a CSS variable.
     */
    default?: string;
    /**
     * Associated color format. Set after initialization.
     */
    format?: string;
    /**
     * An optional label for any variable / setting related component.
     */
    label?: string;
    /**
     * The assigned store when applicable for a CSS variable. Set after initialization.
     */
    store?: Writable<string | null>;
    /**
     * Type of component / variable.
     */
    type: string;
    /**
     * A CSS variable name.
     */
    var?: string;
  };
  /**
   * Theme store data; CSS variable names to value.
   */
  type Data = {
    [key: string]: string;
  };
  type Config = {
    /**
     * An iterable list of theme store component data.
     */
    components: Iterable<Component>;
    /**
     * A semantic version string.
     */
    version: string;
  };
  interface Options {
    /**
     * Data defining CSS theme store components and variables.
     */
    config: Config;
    /**
     * An associated TJSGameSettings instance.
     */
    gameSettings: TJSGameSettings;
    /**
     * The world game setting key.
     */
    key: string;
    /**
     * The world setting namespace.
     */
    namespace: string;
    /**
     * An associated TJSStyleManager instance to manipulate CSS variables.
     */
    styleManager: TJSStyleManager;
  }
}

export { TJSGameSettingsWithUI, TJSThemeStore };