////
/// @group counter-list
/// Outputs a styled list with counters

@use "sass:map";
@use "sass:selector" as sassSelector;

@use "../utils";
@use "../selector";
@use "../color";
@use "../breakpoint";

/// Module Settings
/// @type Map
/// @prop {List|CssUnit} margin [(2rem 0)] The top and bottom margin of the list.
/// @prop {List|CssUnit} item-margin [((0 0 1rem 0))] The margin applied to each list item.
/// @prop {Keyword} align-items [baseline] How to align the counter (flexbox align-items values)
/// @prop {CssUnit} counter-width [2.4em] The width and height (if height is falsy)
/// @prop {CssUnit} counter-height [null] The height (optional)
/// @prop {CssUnit} counter-gap [1em] The gap between the counter and the list item content.
/// @prop {String} counter-style [numeric] The list-style-type used for the counter.
/// @prop {Keyword|Percentage} counter-border-radius [50%] The border-radius of the counter element.
/// @prop {CssUnit} counter-font-size [1.2em] The font-size of the counter text.
/// @prop {Color|String} counter-color [white] The text color of the counter. Accepts color names or hex codes.
/// @prop {Color|String} counter-background-color ["accent"] The background color of the counter. Refers to a color in the color module.
/// @prop {String} extra-selector [null] Additional selectors to include table styling.

$config: (
  "margin" : (2rem 0),
  "item-margin" : (0 0 1rem 0),
  "align-items" : baseline, 
  "counter-width" : 2.4em,
  "counter-height" : null,
  "counter-gap" : 1em,
  "counter-style" : numeric,
  "counter-border-radius" : 50%,
  "counter-font-size" : 1.2em,
  "counter-font-weight" : null,
  "counter-font-family" : null,
  "counter-color" : white,
  "counter-background-color" : "accent",
  "extra-selector" : null
) !default;

/// Change modules $config
/// @param {Map} $changes Map of changes
/// @example scss
///   @include ulu.component-counter-list-set(( "property" : value ));

@mixin set($changes) {
  $config: map.merge($config, $changes) !global;
}

/// Get a config option
/// @param {Map} $name Name of property
/// @example scss
///   @include ulu.component-counter-list-get("property");

@function get($name) {
  @return utils.require-map-get($config, $name, "counter-list [config]");
}

/// Output counter-list component styles
/// @demo counter-list
/// @example html {preview}
///   <ol class="counter-list">
///     <li class="counter-list__item">This is a item that will get counted</li>
///     <li class="counter-list__item">Another item that has more content to show line wrapping. Lorem ipsum et depsi anu. Dolor et anu.</li>
///     <li class="counter-list__item">Small Amount of Text</li>
///   </ol>

@mixin styles {
  $prefix: selector.class("counter-list");
  $prefix-item: sassSelector.parse("#{ $prefix }__item");
  $extra-selector: get("extra-selector");

  $selector: $prefix;
  $selector-item: sassSelector.parse("#{ $prefix } > li, #{ $prefix-item }");

  @if ($extra-selector) {
    $selector: sassSelector.parse("#{ $prefix }, #{ $extra-selector }");
    $selector-item: sassSelector.parse("#{ $selector-item }, #{ $extra-selector } > li");
  }

  #{ $selector } {
    margin: get("margin");
    counter-reset: ulu-counter-list;
  }

  #{ $selector-item } {
    $width: get("counter-width");
    $height: utils.fallback(get("counter-height"), $width);

    display: flex;
    gap: get("counter-gap");
    align-items: get("align-items");
    margin: get("item-margin");
    min-height: $height;
    &::before {
      display: flex;
      align-items: center;
      justify-content: center;
      width: $width;
      height: $height;
      flex: 0 0 $width;
      counter-increment: ulu-counter-list;
      content: counter(ulu-counter-list, get("counter-style"));
      font-size: get("counter-font-size");
      font-family: get("counter-font-family");
      font-weight: get("counter-font-weight");
      color: color.get(get("counter-color"));
      background-color: color.get(get("counter-background-color"));
      border-radius: get("counter-border-radius");
    }

    // Keeping this could be useful
    // but we need to think about how its setup
    // - Probably should be a modifier (choice)
    // - May need either option for how align-items is set (flex-start vs center)
    // - This could be useful when used in grid
    // - May need to be pervasive and not linked to a breakpoint (alternate style)
    // - It's also just useful to know you could override the layout like this 
    //   to get useful variations (maybe we don't need to include it but users 
    //   can do specific)
    // @if ( get("counter-mobile-toggle") ) {
    //   @include breakpoint.max("small") {
    //     padding-left: 0;
    //     padding-top: calc(get("counter-width") + get("counter-gap-mobile"));
    //     flex-direction: column;
    //     align-items: center;
    //   }
    // }
  }

  // Modifiers
  #{ $prefix }--alphabetical {
    & > li::before,
    & > #{ $prefix-item }::before {
      content: counter(ulu-counter-list, upper-alpha);
    }
  }
  #{ $prefix }--numeric {
    & > li::before,
    & > #{ $prefix-item }::before {
      content: counter(ulu-counter-list, numeric);
    }
  }
  #{ $prefix }--no-reset {
    counter-reset: none;
  }
}