// stylelint-disable-next-line scss/partial-no-import
@import '../polaris-tokens/colors.color-map';

///
/// Color data
///
/// Shopify color palette, extended specifically for polaris-react.
///
/// @type map
$color-palette-data: $polaris-colors;

// Add state colors to the palette
$color-palette-data: map-extend(
  $color-palette-data,
  (
    'state': (
      'hover': rgba(223, 227, 232, 0.3),
      'focused': rgba(223, 227, 232, 0.3),
      'active': rgba(179, 188, 245, 0.1),
      'selected': rgba(179, 188, 245, 0.15),
      'subdued': rgba(249, 250, 251, 1),
      'disabled': rgba(249, 250, 251, 1),
      'hover-destructive': rgba(251, 234, 229, 0.4),
      'focused-destructive': rgba(251, 234, 229, 0.4),
      'active-destructive': rgba(220, 56, 37, 0.03),
    ),
  )
);

/// Returns the color value for a given color name and group.
///
/// @param {String} $hue - The color’s hue.
/// @param {String} $value - The darkness/lightness of the color. Defaults to
/// base.
/// @param {Color} $for-background - The background color on which this color
/// will appear. Applies a multiply filter to ensure appropriate contrast.
/// @return {Color} The color value.

@function color($hue, $value: base, $for-background: null) {
  $fetched-color: map-get(map-get($color-palette-data, $hue), $value);

  @if map-has-key($color-palette-data, $fetched-color) {
    $fetched-color: map-get(
      map-get($color-palette-data, $fetched-color),
      $value
    );
  }

  @if $for-background {
    $fetched-color: color-multiply($fetched-color, $for-background);
  }

  @if type-of($fetched-color) == color {
    @return $fetched-color;
  } @else {
    // stylelint-disable string-no-newline
    $error: "
Color `#{$hue}, #{$value}` not found. Make sure arguments are strings.
GOOD: color('yellow')
BAD: color(yellow)

Available options: #{available-names($color-palette-data)}
";
    // stylelint-enable

    @error $error;
  }
}

/// Darkens the foreground color by the background color. This is the same as
/// the "multiply" filter in graphics apps.
///
/// @param {Color} $foreground - The color to darken.
/// @param {Color} $background - The background to base darkening on.
/// @return {Color} The modified color.

@function color-multiply($foreground, $background: null) {
  @if $background {
    $background: rgb(255, 255, 255);
  }

  $red: red($background) * red($foreground) / 255;
  $green: green($background) * green($foreground) / 255;
  $blue: blue($background) * blue($foreground) / 255;

  $opacity: opacity($foreground);
  $background-opacity: opacity($background);

  // calculate opacity
  $bm-red: $red * $opacity + red($background) * $background-opacity *
    (1 - $opacity);
  $bm-green: $green * $opacity + green($background) * $background-opacity *
    (1 - $opacity);
  $bm-blue: $blue * $opacity + blue($background) * $background-opacity *
    (1 - $opacity);

  @return rgb($bm-red, $bm-green, $bm-blue);
}

///
/// Color palette for Windows high-contrast mode
/// See https://bit.ly/2vN9aGO
///
/// @type map

$ms-high-contrast-color-data: (
  'text': windowText,
  'disabled-text': grayText,
  'selected-text': highlightText,
  'selected-text-background': highlight,
  'button-text': buttonText,
  'button-text-background': buttonFace,
  'background': window,
);

///
/// Returns the color value for Windows high contrast mode
///
/// @param {String} $color - The name of the high-contrast color.
/// @return {Color} The color value.

@function ms-high-contrast-color($color) {
  $fetched-color: map-get($ms-high-contrast-color-data, $color);

  @if $fetched-color {
    @return $fetched-color;
  } @else {
    // stylelint-disable string-no-newline
    $error: "
Color `#{$color}` not found. Make sure argument is a string.
GOOD: ms-high-contrast-color('selected-text')
BAD: ms-high-contrast-color(selected-text).

Available options: #{available-names($ms-high-contrast-color-data)}
";
    // stylelint-enable

    @error $error;
  }
}