/// <reference path="./styles-generated.d.ts" />

interface Style {
  readonly id: StyleId;

  /**
   * The name of this Style as it appears in the Designer's Styles panel
   * (e.g. `'button'`, `'is-primary'`, `'h1'`).
   *
   * Synchronous: the value is hydrated when the Style is first returned
   * from the API and never changes for that instance.
   *
   * @example
   * ```ts
   * const style = await webflow.getStyleByName('button');
   * console.log(style.name); // 'button'
   * ```
   */
  readonly name: string;

  /**
   * The origin of this Style — whether it was created on the current site
   * or imported from a library.
   *
   * - `'site'`    — the style was created on the current site
   * - `'library'` — the style originated from a Shared Library or
   *                  AI Site Generation
   *
   * Synchronous: the value is hydrated when the Style is first returned
   * from the API and never changes for that instance.
   *
   * @example
   * ```ts
   * const styles = await webflow.getAllStyles();
   * const siteStyles = styles.filter((s) => s.source === 'site');
   * const libraryStyles = styles.filter((s) => s.source === 'library');
   * ```
   */
  readonly source: StyleSource;

  /**
   * The kind of Style — class, combo, HTML tag, element-scoped style, or
   * descendant selector.
   *
   * - `'global'`     — a standalone class (`.my-class`)
   * - `'combo'`      — a class combined with a parent class (`.parent.child`)
   * - `'tag'`        — an HTML tag style (`h1`, `p`, `a`)
   * - `'element'`    — a style scoped to a single element instance
   * - `'descendant'` — a descendant selector (`.parent .child`)
   *
   * Synchronous: the value is hydrated when the Style is first returned
   * from the API and never changes for that instance.
   *
   * Note: `'element'` styles may appear in `webflow.getAllStyles()` results
   * but most Style operations on them are not supported and will reject with
   * a `resourceMissing` error.
   *
   * @example
   * ```ts
   * const styles = await webflow.getAllStyles();
   * const globalClasses = styles.filter((s) => s.type === 'global');
   * const comboClasses = styles.filter((s) => s.type === 'combo');
   * ```
   */
  readonly type: StyleType;

  /**
   * Retrieve the name of the Style.
   * @example
   * ```ts
   * let styleName = await myStyle.getName();
   * console.log("Style Name:", styleName);
   * ```
   */
  getName(): Promise<string>;
  /**
   * Rename the Style.
   * @param name - The new name for the Style.
   * @returns A Promise that resolves to null when the rename is complete.
   * @example
   * ```ts
   * await myStyle.setName('NewStyleName');
   * ```
   */
  setName(name: string): Promise<null>;
  /**
   * Retrieve the properties of the style.
   * @param options - Options to filter properties based on breakpoints, pseudo states, and component variants.
   * @returns CSS properties and their values for the given options.
   * @example
   * ```ts
   * // Get base properties
   * let baseProperties = await myStyle.getProperties();
   *
   * // Get properties for a specific breakpoint and pseudo state
   * let hoverProperties = await myStyle.getProperties({ breakpoint: 'medium', pseudo: 'hover' });
   *
   * // Get properties for a component variant
   * let variantProperties = await myStyle.getProperties({ variantId: 'variant-dark' });
   *
   * // Combine variant with breakpoint and pseudo
   * let combinedProperties = await myStyle.getProperties({
   *   variantId: 'variant-dark',
   *   breakpoint: 'medium',
   *   pseudo: 'hover',
   * });
   * ```
   */
  getProperties(options?: StyleOptions): Promise<PropertyMap>;
  /**
   * Sets CSS properties for the Style.
   * @param props - The new properties to set for the style. You can use variables here as well.
   * @param options - Options to target specific breakpoints, pseudo states, and component variants.
   * @example
   * ```ts
   * // Set base properties
   * await myStyle.setProperties({ color: 'red', 'font-size': '16px' });
   *
   * // Set properties for breakpoint and pseudo state
   * await myStyle.setProperties(
   *   { color: 'blue', 'font-size': '18px' },
   *   { breakpoint: 'medium', pseudo: 'hover' }
   * );
   *
   * // Set properties for a component variant
   * await myStyle.setProperties(
   *   { color: 'white', 'background-color': 'black' },
   *   { variantId: 'variant-dark' }
   * );
   *
   * // Target variant by name instead of ID
   * await myStyle.setProperties(
   *   { 'font-weight': 'bold' },
   *   { variantName: 'Dark Mode' }
   * );
   * ```
   */
  setProperties(props: PropertyMap, options?: StyleOptions): Promise<null>;
  /**
   * Removes multiple CSS properties from the Style.
   * @param props - Array of property names to remove.
   * @param options - Options to target specific breakpoints, pseudo states, and component variants.
   * @example
   * ```ts
   * // Remove properties from base styles
   * await myStyle.removeProperties(['color', 'font-size']);
   *
   * // Remove properties from a variant
   * await myStyle.removeProperties(['color', 'background-color'], { variantId: 'variant-dark' });
   * ```
   */
  removeProperties(
    props: Array<StyleProperty>,
    options?: StyleOptions
  ): Promise<null>;
  /**
   * Retrieve the value of a specific property of the style.
   * @param prop - The name of the property to retrieve.
   * @param options - Options to target specific breakpoints, pseudo states, and component variants.
   * @returns Returns the value of the CSS property, or null if not set.
   * @example
   * ```ts
   * // Get base property
   * let color = await myStyle.getProperty('color');
   *
   * // Get property for breakpoint and pseudo state
   * let hoverColor = await myStyle.getProperty('color', { breakpoint: 'medium', pseudo: 'hover' });
   *
   * // Get property for a component variant
   * let variantColor = await myStyle.getProperty('color', { variantId: 'variant-dark' });
   *
   * // Get property from variant by name
   * let namedVariantColor = await myStyle.getProperty('color', { variantName: 'Dark Mode' });
   * ```
   */
  getProperty<p extends StyleProperty>(
    prop: p,
    options?: StyleOptions
  ): Promise<null | PropertyMap[p]>;
  /**
   * Sets a specific CSS property for the Style.
   * @param prop - The name of the property to set.
   * @param value - The new value to set for the property.
   * @param options - Options to target specific breakpoints, pseudo states, and component variants.
   * @example
   * ```ts
   * // Set base property
   * await myStyle.setProperty('color', 'red');
   *
   * // Set property for breakpoint and pseudo state
   * await myStyle.setProperty('color', 'blue', { breakpoint: 'medium', pseudo: 'hover' });
   *
   * // Set property for a component variant
   * await myStyle.setProperty('color', 'white', { variantId: 'variant-dark' });
   *
   * // Set property on variant by name
   * await myStyle.setProperty('font-weight', 'bold', { variantName: 'Dark Mode' });
   * ```
   */
  setProperty<p extends StyleProperty>(
    prop: p,
    value: NonNullable<PropertyMap[p]>,
    options?: StyleOptions
  ): Promise<null>;
  /**
   * Removes a specific CSS property from the Style.
   * @param prop - The name of the property to remove.
   * @param options - Options to target specific breakpoints, pseudo states, and component variants.
   * @example
   * ```ts
   * // Remove property from base styles
   * await myStyle.removeProperty('color');
   *
   * // Remove property from a variant
   * await myStyle.removeProperty('color', { variantId: 'variant-dark' });
   * ```
   */
  removeProperty(prop: StyleProperty, options?: StyleOptions): Promise<null>;
  /**
   * Removes all CSS properties from the Style, including base styles and all variant styles.
   * @example
   * ```ts
   * await myStyle.removeAllProperties();
   * ```
   */
  removeAllProperties(): Promise<null>;
  /**
   * Returns true if the style is a combo class.
   * @example
   * ```ts
   * const isComboClass = await myStyle.isComboClass();
   * console.log("Is Combo Class:", isComboClass);
   * ```
   */
  isComboClass(): boolean;
  /**
   * Retrieve the public categorization of this Style, as it appears in the
   * Designer's Styles panel. Returns one of:
   *
   * - `'global'`     — a named, reusable class style (no combinator)
   * - `'combo'`      — a class modifier on a base class (`.button.is-primary`)
   * - `'tag'`        — a style targeting an HTML tag (`h1`, `body`)
   * - `'element'`    — a style scoped to a single element instance
   * - `'descendant'` — a class style nested under another class
   *                    (`.parent .child`)
   *
   * Synchronous: the value is hydrated when the Style is first returned from
   * the API and never changes for that instance.
   *
   * Note: `'element'` styles may appear in `webflow.getAllStyles()` results
   * but most Style operations on them are not supported and will reject with
   * a `resourceMissing` error.
   *
   * @example
   * ```ts
   * const styles = await webflow.getAllStyles();
   * const globalClasses = styles.filter((s) => s.getType() === 'global');
   * ```
   */
  getType(): StyleType;
  /**
   * Returns true if this Style originated from a library (Shared Library or AI Site Generation).
   *
   * Synchronous: the value is hydrated when the Style is first returned
   * from the API and never changes for that instance.
   *
   * @example
   * ```ts
   * const styles = await webflow.getAllStyles();
   * const siteOnlyClasses = styles.filter(
   *   (s) => s.getType() === 'global' && !s.isFromLibrary()
   * );
   * ```
   */
  isFromLibrary(): boolean;
  /**
   * Retrieve a variable mode from the style.
   * @param collection - The collection from which to get the currently applied mode.
   * @param options - Options to get variable mode based on breakpoints, pseudo classes / states, and component variants.
   * @example
   * ```ts
   * const collection = await webflow.getVariableCollectionById('collection-id');
   * let variableMode = await myStyle.getVariableMode(collection);
   * ```
   */
  getVariableMode(
    collection: VariableCollection,
    options?: StyleOptions
  ): Promise<null | VariableMode>;
  /**
   * Sets a variable mode for the style.
   * @param collection - The collection that the mode being set belongs to.
   * @param mode - The variable mode to set.
   * @param options - Options to set variable mode based on breakpoints, pseudo classes / states, and component variants.
   * @example
   * ```ts
   * const collection = await webflow.getVariableCollectionById('collection-id');
   * const mode = await collection.getVariableModeByName('Dark');
   * await myStyle.setVariableMode(collection, mode, {
   *   variantId: 'variant-dark',
   * });
   * ```
   */
  setVariableMode(
    collection: VariableCollection,
    mode: VariableMode,
    options?: StyleOptions
  ): Promise<null>;
  /**
   * Removes a variable mode from the style.
   * @param collection - The collection that the mode being removed belongs to.
   * @param options - Options to remove variable mode based on breakpoints, pseudo classes / states, and component variants.
   * @example
   * ```ts
   * const collection = await webflow.getVariableCollectionById('collection-id');
   * await myStyle.removeVariableMode(collection)
   * ```
   */
  removeVariableMode(
    collection: VariableCollection,
    options?: StyleOptions
  ): Promise<null>;
  /**
   * Retrieve all variable modes applied on the style.
   * @param options - Options to get variable modes based on breakpoints, pseudo classes / states, and component variants.
   * @example
   * ```ts
   * const modes = await myStyle.getVariableModes();
   * ```
   */
  getVariableModes(
    options?: StyleOptions
  ): Promise<VariableModeStylePropertyMap>;
  /**
   * Sets variable modes for the style.
   * @param props - The variable modes to set.
   * @param options - Options to set variable modes based on breakpoints, pseudo classes / states, and component variants.
   * @example
   * ```ts
   * await myStyle.setVariableModes({
   *   'collection-id-1': 'mode-id-1',
   *   'collection-id-2': 'mode-id-2',
   * });
   * ```
   */
  setVariableModes(
    props: VariableModeStylePropertyMap,
    options?: StyleOptions
  ): Promise<null>;
  /**
   * Removes variable modes from the style.
   * @param modes - The variable modes to remove from the style.
   * @param options - Options to remove variable modes based on breakpoints, pseudo classes / states, and component variants.
   * @example
   * ```ts
   * const collection = await webflow.getVariableCollectionById('collection-id');
   * const mode = await collection.getVariableModeByName('Dark');
   * const modeTwo = await collection.getVariableModeByName('Light');
   * await myStyle.removeVariableModes([mode, modeTwo]);
   * ```
   */
  removeVariableModes(
    modes: Array<VariableMode>,
    options?: StyleOptions
  ): Promise<null>;
  /**
   * Removes all variable modes from the style.
   * @param options - Options to remove all variable modes based on breakpoints, pseudo classes / states, and component variants.
   * @example
   * ```ts
   * await myStyle.removeAllVariableModes();
   * ```
   */
  removeAllVariableModes(options?: StyleOptions): Promise<null>;
  /**
   * Retrieves the parent style for a combo class and otherwise returns null.
   * @example
   * ```ts
   * const parentStyle = await myStyle.getParent();
   * ```
   */
  getParent(): Promise<Style | null>;
}

type StyleId = string;

/**
 * Public categorization of a Style as it appears in the Designer's Styles
 * panel. See `Style.getType()` for the meaning of each value.
 */
type StyleType = 'global' | 'combo' | 'tag' | 'element' | 'descendant';

/**
 * Origin of a Style — whether it was created on the current site or
 * imported from a library (Shared Library or AI Site Generation).
 * See `Style.source` for details.
 */
type StyleSource = 'site' | 'library';

type BreakpointAndPseudo = {
  breakpoint?: BreakpointId;
  pseudo?: PseudoStateKey;
};

/**
 * Options for targeting style properties by breakpoint, pseudo state, and component variant.
 *
 * When no options are provided, the base styles are targeted (main breakpoint, no pseudo, no variant).
 * Specify variantId to target component variant styles.
 */
type StyleOptions = BreakpointAndPseudo & {
  /**
   * Component variant ID to target.
   * Cannot be 'base' (omit options entirely for base styles).
   */
  variantId?: string;
};

type BreakpointId =
  | 'xxl'
  | 'xl'
  | 'large'
  | 'main'
  | 'medium'
  | 'small'
  | 'tiny';

type VariableModeStylePropertyMap = {
  [collectionId: VariableCollectionId]: VariableModeId;
};