////
/// @access private
/// @group theme
////

@import '~@react-md/utils/dist/functions';
@import './variables';

/// @access private
/// @param {String} theme-name - The name of the theme to extract from the
/// theme-map.
/// @param {Map} theme-map - The map containing the theme values.
/// @param {String} theme-group - The group/package that the theme exists in.
/// This should be one of the react-md packages.
/// @return {Color|String|Number} The value from the theme map.
@function rmd-theme-get-var-value($theme-name, $theme-map, $theme-group) {
  @if type-of($theme-name) == 'color' or $theme-name == 'currentColor' {
    @return $theme-name;
  }

  @return rmd-utils-validate(
    $theme-map,
    $theme-name,
    '#{$theme-group} property'
  );
}

/// This function is used behind the scenes of react-md to help get css
/// variables from different packages with some built in validation. This is
/// generally used to create the helper function within each package to get the
/// css var string.
///
/// @example scss - Example Usage SCSS
///   $rmd-example-theme-values: (
///     background-color: #303030,
///     color: $rmd-red-500,
///   );
///
///   @function rmd-example-get-var($theme-name) {
///     @return rmd-theme-get-var($theme-name, $rmd-example-theme-values, example);
///   }
///
///   .example-class {
///     color: rmd-example-get-var(color);
///   }
///
/// @access private
/// @param {String} theme-name - The name of the theme to extract from the
/// theme-map.
/// @param {Map} theme-map - The map containing the theme values.
/// @param {String} theme-group - The group/package that the theme exists in.
/// This should be one of the react-md packages.
/// @param {Color|String|Number} fallback [null] - A fallback value to use for
/// css variables if the theme variable has not been defined somehow. When this
/// is set to `null`, it will automatically use the value from the `theme-map`
/// instead.
/// @return {String} a css var string to apply to a css property.
@function rmd-theme-get-var(
  $theme-name,
  $theme-map,
  $theme-group,
  $fallback: null
) {
  $validated-fallback: rmd-theme-get-var-value(
    $theme-name,
    $theme-map,
    $theme-group
  );
  $fallback: if($fallback == null, $validated-fallback, $fallback);

  @if $fallback == null {
    @return var(--rmd-#{$theme-group}-#{$theme-name});
  }

  @return var(--rmd-#{$theme-group}-#{$theme-name}, #{$fallback});
}

///
/// @access private
@mixin rmd-theme-apply-rmd-var(
  $property,
  $theme-name,
  $theme-map,
  $theme-group,
  $fallback: null
) {
  @if not $rmd-theme-no-css-variables-fallback {
    // Apply the base property and color-value for browsers that do not support css-variables.
    #{$property}: rmd-theme-get-var-value(
      $theme-name,
      $theme-map,
      $theme-group
    );
  }

  #{$property}: rmd-theme-get-var(
    $theme-name,
    $theme-map,
    $theme-group,
    $fallback
  );
}

///
/// @access private
@mixin rmd-theme-update-rmd-var($value, $theme-name, $theme-map, $theme-group) {
  $validated: rmd-utils-validate(
    $theme-map,
    $theme-name,
    '#{$theme-name} property'
  );

  #{--rmd-#{$theme-group}-#{$theme-name}}: $value;
}

///
/// @access private
@mixin rmd-theme-create-root-theme($theme-map, $theme-group, $exclude: null) {
  :root {
    @each $theme-name, $theme-value in $theme-map {
      @if $theme-value !=
        null and
        ($exclude == null or not index($exclude, $theme-name))
      {
        @include rmd-theme-update-rmd-var(
          $theme-value,
          $theme-name,
          $theme-map,
          $theme-group
        );
      }
    }
  }
}