////
/// @group progress-circle
/// A circular progress indicator.
////

@use "sass:map";
@use "sass:math";
@use "../selector";
@use "../utils";
@use "../color";

/// Module Settings
/// @type Map
/// @prop {Dimension} size [100px] The width and height of the chart.
/// @prop {Number} viewbox-size [32] The size of the SVG viewbox. Used to calculate mask radius.
/// @prop {Number} stroke-width [10] The width of the progress circle's stroke.
/// @prop {Color} color-track ["placeholder-background-alt"] The color of the inactive track. Can be a theme color name or a CSS variable.
/// @prop {Color} color-progress ["indicator"] The color of the progress stroke in a neutral state. Can be a theme color name or a CSS variable.
/// @prop {Color} color-mask [white] The color of the center mask that creates the donut hole. Can be a theme color name or a CSS variable.
/// @prop {Color} color-mask-pie [rgba(255, 255, 255, 0.5)] The mask color when using the pie style modifier.
/// @prop {Color} value-color ["type"] The theme color name for the percentage text inside the circle.
/// @prop {Color} value-color-outside ["type-tertiary"] The theme color name for the percentage text when displayed outside the circle.
/// @prop {Dimension | List} value-margin-outside [(0.1em 0.35em)] The margin for the outside value text.
/// @prop {Time} transition-duration [300ms] The duration for the stroke transition animation (when the component is updating already in the page)
/// @prop {Time} animation-duration [1s] The duration for the stroke animation (relies on template having a custom build animation per pie based on dash array). This is used for initial animations
/// @prop {Time} animation-delay [2s] The delay for the animation
/// @prop {Time} animation-timing [ease-in] Timing function for animation
/// @prop {Map} status-colors A map of status names to their corresponding colors (e.g., "low": "warning").
/// @prop {Map} sizes A map of size variations. Each key is a modifier name (e.g., "small") and the value is a map with `size` and `stroke-width` properties.

$config: (
  "size": 100px,
  "viewbox-size": 32,
  "stroke-width": 10,
  "color-track": "placeholder-background-alt",
  "color-progress": "accent",
  "color-mask": white,
  "color-mask-pie": rgba(255, 255, 255, 0.4),
  "value-color": "type",
  "value-color-outside": "type-tertiary",
  "value-margin-outside" : (0.1em 0.35em),
  "transition-duration" : 300ms,
  "animation-duration" : 1s,
  "animation-delay" : 2s,
  "animation-timing" : ease-in,
  "status-colors": (
    "danger": "danger",
    "warning": "warning",
    "success": "success",
  ),
  "sizes": (
    "small" : (
      "size": 40px,
      "stroke-width": 13,
    )
  )
) !default;

/// Change modules $config
/// @param {Map} $changes Map of changes
@mixin set($changes) {
  $config: map.merge($config, $changes) !global;
}

/// Get a config option
/// @param {String} $name Name of property
@function get($name) {
  @return utils.require-map-get($config, $name, "progress-circle [config]");
}

/// Prints component styles
/// @demo progress-circle
@mixin styles {
  $prefix: selector.class("progress-circle");

  #{ $prefix } {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    --ulu-progress-circle-stroke-width: #{ get("stroke-width") };
  }
  #{ $prefix }__chart {
    position: relative;
    line-height: 1;
  }
  #{ $prefix }__chart-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: color.get(get("value-color"));
    text-shadow: none;
  }
  #{ $prefix }__chart-svg {
    width: get("size");
    height: get("size");
    transform: rotate(-90deg);
    border-radius: 50%;
  }
  #{ $prefix }__chart-track {
    fill: transparent;
    stroke: color.get(get("color-track"));
    stroke-width: var(--ulu-progress-circle-stroke-width);
  }
  #{ $prefix }__chart-pie {
    fill: transparent;
    stroke: color.get(get("color-progress"));
    stroke-width: var(--ulu-progress-circle-stroke-width);
    stroke-dasharray: 0 100;
    will-change: stroke-dasharray;
    // If value is changing
    transition: stroke get("transition-duration"); 
    // For in template composed initial animation
    animation-duration: get("animation-duration"); 
    animation-delay: get("animation-delay"); 
    animation-timing-function: get("animation-timing");
  }
  #{ $prefix }__chart-mask {
    fill: color.get(get("color-mask"));
    r: calc( (get("viewbox-size") / 2) - (var(--ulu-progress-circle-stroke-width) / 2) );
  }
  #{ $prefix }__value {
    color: color.get(get("value-color-outside"));
    margin: get("value-margin-outside");
    font-weight: normal;
    line-height: 1;
  }

  #{ $prefix }--outside {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
  #{ $prefix }--outside-below {
    display: block;
  }
  #{ $prefix }--pie {
    // Note do not adjust the custom property for this since we want the mask to still be sized correctly
    #{ $prefix }__chart-pie {
      stroke-width: get("viewbox-size"); // As large as the svg (so it fills the circle)
    }
    #{ $prefix }__chart-track {
      fill: color.get(get("color-track"));
    }
    #{ $prefix }__chart-mask {
      fill: color.get(get("color-mask-pie"));
    }
  }
  #{ $prefix }--no-mask {
    #{ $prefix }__chart-mask {
      display: none;
    }
  }


  @each $name, $props in get("sizes") {
    #{ $prefix }--#{ $name } {
      --ulu-progress-circle-stroke-width: #{map.get($props, "stroke-width")};
      #{ $prefix }__chart-svg {
        width: map.get($props, "size");
        height: map.get($props, "size");
      }
    }
  }
  @each $name, $color in get("status-colors") {
    #{ $prefix }--#{ $name } {
      #{ $prefix }__chart-pie {
        stroke: color.get($color);
      }
    }
  }

  
}