@use 'sass:color' as *;
@use "sass:list" as *;

@function darkMode($color) {
  $lightness: channel($color, "lightness", $space: hsl);
  $inverted-lightness: 100% - $lightness;
  @return hsl(channel($color, "hue", $space: hsl), channel($color, "saturation", $space: hsl), $inverted-lightness);
}

@function hexToRGBString($hexColor) {
  @return '#{channel($hexColor, "red", $space: rgb)} #{channel($hexColor, "green", $space: rgb)} #{channel($hexColor, "blue", $space: rgb)}';
}

@function hexToHSL_h($hexColor) {
  @return '#{channel($hexColor, "hue", $space: hsl)}';
}

@function hexToHSL_s($hexColor) {
  @return '#{channel($hexColor, "saturation", $space: hsl)}%';
}

@function hexToHSL_l($hexColor) {
  @return '#{channel($hexColor, "lightness", $space: hsl)}%';
}

@mixin iconStyle {
  aspect-ratio: 1;
  width: 1em;
  height: 1em;
  min-height: 1em;
  min-width: 1em;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}

// Creates a theme from a map of colours
@mixin createThemeVars($colors, $vars) {
  @each $key, $value in $colors {
    --app-color-#{$key}: #{$value};
    --app-color-#{$key}-rgb: #{hexToRGBString($value)};
    --app-color-#{$key}-h: #{hexToHSL_h($value)};
    --app-color-#{$key}-s: #{hexToHSL_s($value)};
    --app-color-#{$key}-l: #{hexToHSL_l($value)};
  }
  @each $key, $value in $vars {
    --#{$key}: #{$value};
  }
}

// Combines two lists into a list of pairs
@function combine($list1, $list2) {
  $result: ();

  @each $item1 in $list1 {
    @each $item2 in $list2 {
      $result: append($result, append($item1, $item2, comma), comma);
    }
  }

  @return $result;
}

/* Creates comma-separated list of transitions for a given properties */
@function animatePropsToTransitions($variant, $type, $animate-properties) {
  $transitions: ();

  @each $prop in $animate-properties {
    $transitions: append($transitions, $prop var(--app-motion-#{$type}-#{$variant}), comma);
  }

  @return $transitions;
}

/* Creates list of classes for Vue transition */
@mixin createTransition($name, $animate-properties, $parameters: ()) {
  $combinations: ();

  $types: standard, emphasis;

  @each $paramName, $paramValues in $parameters {
    $combinations: if(sass(length($combinations) == 0): $paramValues; else: combine($combinations, $paramValues));
  }

  @if(length($combinations) ==0) {
    $combinations: ("");
  }

  @each $combination in $combinations {
    $class-combination: "";

    @if(length($combinations) > 1) {
      @each $el in $combination {
        $class-combination: #{$class-combination}-#{$el};
      }
    }

    @each $type in $types {
      $symbol: if(sass($type == standard): ""; else: "-#{$type}");

      .#{$name}#{$class-combination}#{$symbol}-enter-active {
        transition: animatePropsToTransitions(enter, $type, $animate-properties) allow-discrete;
      }

      .#{$name}#{$class-combination}#{$symbol}-leave-active {
        transition: animatePropsToTransitions(leave, $type, $animate-properties) allow-discrete;
      }

      .#{$name}#{$class-combination}#{$symbol}-enter-from,
      .#{$name}#{$class-combination}#{$symbol}-leave-to {
          @if(length($combinations) == 1) {
            @content
          } @else {
            @content ($combination...);
          }
      }
    }
  }
}