////
/// @group theme
////

@import './variables';
@import './functions';
@import './helpers';

/// Applies one of theme values to the provided property.
///
/// @example scss - Example Theme Application
///   html {
///     @include rmd-theme(background-color, background);
///     @include rmd-theme(color, text-primary-on-background);
///   }
///
///   .primary-bg {
///     @include rmd-theme(background-color, primary);
///   }
///
///   .primary-text {
///     @include rmd-theme(color, primary);
///   }
///
/// @param {String} property - This is normally `color` or `background-color`,
/// but any valid CSS property that accepts color values can be used.
/// @param {String} theme-style - The type of theme style to use. This should be
/// one of the `$rmd-theme-values` or a literal color value.
@mixin rmd-theme($property, $theme-style) {
  @include rmd-theme-apply-rmd-var($property, $theme-style, $rmd-theme-values, theme);
}

/// This is an extremely simple mixin that will allow you to quickly set or
/// update the value of a theme css variable with the new provided value.
///
/// @example scss - Example Usage SCSS
///   $rmd-theme-primary: $rmd-blue-500;
///   $rmd-theme-secondary: $rmd-pink-a-200;
///
///   .some-class-with-different-themes {
///     // no idea if these colors go together...
///     @include rmd-theme-update-var(primary, $rmd-orange-500);
///     @include rmd-theme-update-var(secondary, $rmd-brown-700);
///   }
///
/// @param {String} theme-style - The react-md theme style to update. This
/// should be one of the keys of `$rmd-theme-values` map.
/// @param {Color} value - The updated color value to apply.
@mixin rmd-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var($value, $theme-style, $rmd-theme-values, theme);
}

/// This mixin should normally be used with the `rmd-elevation` mixin to change
/// the background color based on the current elevation in dark themes.
///
/// @since 2.1.0
/// @param {Number} z-value - This should be a number between 0 and 24
/// representing the current elevation.
/// @param {Boolean} css-modules [false] - Boolean if this is being used within
/// CSS Modules which will update the selector to work correctly by wrapping
/// different parts with `:global` and `:local`.
@mixin rmd-theme-dark-elevation($z-value, $css-modules: false) {
  @if $rmd-theme-dark-elevation {
    @if $rmd-theme-dark-class == 'prefers-color-scheme' {
      @media (prefers-color-scheme: dark) {
        & {
          @include rmd-theme-update-var(
            background,
            map-get($rmd-theme-dark-elevation-colors, $z-value)
          );
          @include rmd-theme(background-color, background);
        }
      }
    } @else {
      @include rmd-utils-optional-css-modules($rmd-theme-dark-class, $css-modules) {
        @include rmd-theme-update-var(
          background,
          map-get($rmd-theme-dark-elevation-colors, $z-value)
        );
        @include rmd-theme(background-color, background);
      }
    }
  }
}

/// This mixin can be used to apply the light theme by updating **every** color
/// theme variable across all react-md packages.
///
/// Note: You'll still need to ensure that all the package's mixins were
/// imported to get this to work.
@mixin rmd-theme-light {
  @include rmd-theme-update-var(background, $rmd-theme-light-background);
  @include rmd-theme-update-var(surface, $rmd-theme-light-surface);
  @include rmd-theme-update-var(on-surface, $rmd-black-base);
  @include rmd-theme-update-var(text-primary-on-background, $rmd-theme-primary-text-on-light-color);
  @include rmd-theme-update-var(
    text-secondary-on-background,
    $rmd-theme-secondary-text-on-light-color
  );
  @include rmd-theme-update-var(text-hint-on-background, $rmd-theme-hint-text-on-light-color);
  @include rmd-theme-update-var(
    text-disabled-on-background,
    $rmd-theme-disabled-text-on-light-color
  );
  @include rmd-theme-update-var(text-icon-on-background, $rmd-theme-icon-on-light-color);

  @if mixin-exists(rmd-app-bar-theme-update-var) {
    @include rmd-app-bar-theme-update-var(
      default-background-color,
      $rmd-app-bar-default-light-theme-background-color
    );
    @include rmd-app-bar-theme-update-var(default-color, $rmd-app-bar-default-light-theme-color);
  }

  @if mixin-exists(rmd-card-theme-update-var) {
    @include rmd-card-theme-update-var(color, $rmd-theme-primary-text-on-light-color);
    @include rmd-card-theme-update-var(secondary-color, $rmd-theme-secondary-text-on-light-color);
  }

  @if mixin-exists(rmd-chip-theme-update-var) {
    @include rmd-chip-theme-update-var(
      solid-background-color,
      $rmd-chip-solid-light-background-color
    );
    @include rmd-chip-theme-update-var(solid-color, $rmd-chip-solid-light-color);
    @include rmd-chip-theme-update-var(
      solid-disabled,
      $rmd-chip-solid-light-disabled-background-color
    );
    @include rmd-chip-theme-update-var(
      outline-background-color,
      $rmd-chip-outline-light-background-color
    );
    @include rmd-chip-theme-update-var(outline-color, $rmd-chip-outline-light-color);
  }

  @if mixin-exists(rmd-divider-theme-update-var) {
    @include rmd-divider-theme-update-var(background-color, $rmd-divider-background-color-on-light);
  }

  @if mixin-exists(rmd-form-theme-update-var) {
    @include rmd-form-theme-update-var(text-border-color, $rmd-text-field-light-border-color);
    @include rmd-form-theme-update-var(
      text-border-hover-color,
      $rmd-text-field-light-border-hover-color
    );
    @include rmd-form-theme-update-var(
      text-filled-color,
      $rmd-text-field-filled-light-background-color
    );
  }

  @if mixin-exists(rmd-states-theme-update-var) {
    @include rmd-states-theme-update-var(hover-color, $rmd-states-light-theme-hover-color);
    @include rmd-states-theme-update-var(focus-color, $rmd-states-light-theme-focus-color);
    @include rmd-states-theme-update-var(pressed-color, $rmd-states-light-theme-pressed-color);
    @include rmd-states-theme-update-var(selected-color, $rmd-states-light-theme-selected-color);
    @include rmd-states-theme-update-var(
      ripple-background-color,
      $rmd-states-light-theme-ripple-background-color
    );
  }

  @if mixin-exists(rmd-tabs-theme-update-var) {
    @include rmd-tabs-theme-update-var(active, $rmd-black-base);
    @include rmd-tabs-theme-update-var(inactive, $rmd-theme-secondary-text-on-light-color);
  }
}

/// This mixin can be used to apply the dark theme by updating **every** color theme variable across
/// all react-md packages.
///
/// This is really great to use within a media query for browsers that now support the
/// `prefers-color-scheme` so that if the user has the dark theme enabled, they'll automatically gain
/// the dark theme while using your app as well.
///
/// Note: You'll still need to ensure that all the package's mixins were imported to get this to work.
///
/// @example scss - Media Query Example
///   @media (prefers-color-scheme: dark) {
///     :root {
///       @include rmd-theme-dark;
///     }
///   }
@mixin rmd-theme-dark {
  @include rmd-theme-update-var(background, $rmd-theme-dark-background);
  @include rmd-theme-update-var(surface, $rmd-theme-dark-surface);
  @include rmd-theme-update-var(on-surface, $rmd-white-base);
  @include rmd-theme-update-var(text-primary-on-background, $rmd-theme-primary-text-on-dark-color);
  @include rmd-theme-update-var(
    text-secondary-on-background,
    $rmd-theme-secondary-text-on-dark-color
  );
  @include rmd-theme-update-var(text-hint-on-background, $rmd-theme-hint-text-on-dark-color);
  @include rmd-theme-update-var(
    text-disabled-on-background,
    $rmd-theme-disabled-text-on-dark-color
  );
  @include rmd-theme-update-var(text-icon-on-background, $rmd-theme-icon-on-dark-color);

  @if mixin-exists(rmd-app-bar-theme-update-var) {
    @include rmd-app-bar-theme-update-var(
      default-background-color,
      $rmd-app-bar-default-dark-theme-background-color
    );
    @include rmd-app-bar-theme-update-var(default-color, $rmd-app-bar-default-dark-theme-color);
  }

  @if mixin-exists(rmd-card-theme-update-var) {
    @include rmd-card-theme-update-var(color, $rmd-theme-primary-text-on-dark-color);
    @include rmd-card-theme-update-var(secondary-color, $rmd-theme-secondary-text-on-dark-color);
  }

  @if mixin-exists(rmd-chip-theme-update-var) {
    @include rmd-chip-theme-update-var(
      solid-background-color,
      $rmd-chip-solid-dark-background-color
    );
    @include rmd-chip-theme-update-var(solid-color, $rmd-chip-solid-dark-color);
    @include rmd-chip-theme-update-var(
      solid-disabled,
      $rmd-chip-solid-dark-disabled-background-color
    );
    @include rmd-chip-theme-update-var(
      outline-background-color,
      $rmd-chip-outline-dark-background-color
    );
    @include rmd-chip-theme-update-var(outline-color, $rmd-chip-outline-dark-color);
  }

  @if mixin-exists(rmd-divider-theme-update-var) {
    @include rmd-divider-theme-update-var(background-color, $rmd-divider-background-color-on-dark);
  }

  @if mixin-exists(rmd-form-theme-update-var) {
    @include rmd-form-theme-update-var(text-border-color, $rmd-text-field-dark-border-color);
    @include rmd-form-theme-update-var(
      text-border-hover-color,
      $rmd-text-field-dark-border-hover-color
    );
    @include rmd-form-theme-update-var(
      text-filled-color,
      $rmd-text-field-filled-dark-background-color
    );
  }

  @if mixin-exists(rmd-states-theme-update-var) {
    @include rmd-states-theme-update-var(hover-color, $rmd-states-dark-theme-hover-color);
    @include rmd-states-theme-update-var(focus-color, $rmd-states-dark-theme-focus-color);
    @include rmd-states-theme-update-var(pressed-color, $rmd-states-dark-theme-pressed-color);
    @include rmd-states-theme-update-var(selected-color, $rmd-states-dark-theme-selected-color);
    @include rmd-states-theme-update-var(
      ripple-background-color,
      $rmd-states-dark-theme-ripple-background-color
    );
  }

  @if mixin-exists(rmd-tabs-theme-update-var) {
    @include rmd-tabs-theme-update-var(active, $rmd-white-base);
    @include rmd-tabs-theme-update-var(inactive, $rmd-theme-secondary-text-on-dark-color);
  }
}

/// Creates all the styles for a theme in react-md. This will start by creating CSS Variables
/// for each theme variable and then create class names for each variable.
///
/// @example scss - Normal SCSS Usage
///   // declare your theme variables
///   $rmd-theme-primary: $rmd-teal-500;
///   $rmd-theme-secondary: $rmd-pink-a-400;
///
///   @include react-md-theme;
@mixin react-md-theme {
  @include rmd-theme-create-root-theme($rmd-theme-values, theme);
}