import { ThemeOptions, Theme } from "./createThemeNoVars.js";
import { Components } from "./components.js";
import { DefaultColorScheme, ColorSchemeOverrides, ExtendedColorScheme, SupportedColorScheme, Opacity, Overlays, PaletteBackgroundChannel, PaletteCommonChannel, PaletteColorChannel, PaletteActionChannel, PaletteTextChannel, PaletteAlert, PaletteAppBar, PaletteAvatar, PaletteButton, PaletteChip, PaletteFilledInput, PaletteLinearProgress, PaletteSkeleton, PaletteSlider, PaletteSnackbarContent, PaletteSpeedDialAction, PaletteStepConnector, PaletteStepContent, PaletteSwitch, PaletteTableCell, PaletteTooltip, ColorSystemOptions, CssVarsPalette, ColorSystem, ThemeVars, ThemeCssVarOverrides, ThemeCssVar, CssVarsTheme, Shape, ShapeOptions } from "./createThemeFoundation.js";

// Re-export all types from foundation to maintain backward compatibility
export type { DefaultColorScheme, ColorSchemeOverrides, ExtendedColorScheme, SupportedColorScheme, Opacity, Overlays, PaletteBackgroundChannel, PaletteCommonChannel, PaletteColorChannel, PaletteActionChannel, PaletteTextChannel, PaletteAlert, PaletteAppBar, PaletteAvatar, PaletteButton, PaletteChip, PaletteFilledInput, PaletteLinearProgress, PaletteSkeleton, PaletteSlider, PaletteSnackbarContent, PaletteSpeedDialAction, PaletteStepConnector, PaletteStepContent, PaletteSwitch, PaletteTableCell, PaletteTooltip, ColorSystemOptions, CssVarsPalette, ColorSystem, ThemeVars, ThemeCssVarOverrides, ThemeCssVar, CssVarsTheme, Shape, ShapeOptions };
export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'components'> {
  /**
   * The strategy to generate CSS variables
   *
   * @example 'media'
   * Generate CSS variables using [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme)
   *
   * @example '.mode-%s'
   * Generate CSS variables within a class .mode-light, .mode-dark
   *
   * @example '[data-mode-%s]'
   * Generate CSS variables within a data attribute [data-mode-light], [data-mode-dark]
   */
  colorSchemeSelector?: 'media' | 'class' | 'data' | string;
  /**
   * Prefix of the generated CSS variables
   * @default 'mui'
   */
  cssVarPrefix?: string;
  /**
   * If `true`, the CSS color-scheme will not be set.
   * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme
   * @default false
   */
  disableCssColorScheme?: boolean;
  /**
   * If `true`, the CSS relative color will be used.
   */
  nativeColor?: boolean;
  /**
   * The selector to generate the global CSS variables (non-color-scheme related)
   * @default ':root'
   * @example ':host' // (for shadow DOM)
   * @see https://mui.com/material-ui/customization/shadow-dom/#3-css-theme-variables-optional
   */
  rootSelector?: string;
  /**
   * A function to determine if the key, value should be attached as CSS Variable
   * `keys` is an array that represents the object path keys.
   *  Ex, if the theme is { foo: { bar: 'var(--test)' } }
   *  then, keys = ['foo', 'bar']
   *        value = 'var(--test)'
   */
  shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean;
  /**
   * @default 'light'
   */
  defaultColorScheme?: SupportedColorScheme;
  /**
   * Theme components
   */
  components?: Components<Omit<Theme, 'components' | 'palette'> & CssVarsTheme>;
  /**
   * Color schemes configuration
   */
  colorSchemes?: Partial<Record<DefaultColorScheme, boolean | ColorSystemOptions>> & (ExtendedColorScheme extends string ? Record<ExtendedColorScheme, ColorSystemOptions> : {});
}

/**
 * Generate a theme base on the options received.
 * @param options Takes an incomplete theme object and adds the missing parts.
 * @param args Deep merge the arguments with the about to be returned theme.
 * @returns A complete, ready-to-use theme object.
 */
export default function createThemeWithVars(options?: CssVarsThemeOptions, ...args: object[]): Omit<Theme, 'applyStyles'> & CssVarsTheme;