////
/// @group adaptive-spacing
/// Creates adaptive (changing at breakpoints) in between items (vertical/horizontal layout)
////

@use "sass:map";

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

/// Module Settings
/// @type Map
/// @prop {Boolean}  outputMargin  [false] Toggles the output of margin classes.
/// @prop {Boolean}  outputPadding  [true] This is the background color of the accordion before it is expanded. 
/// @prop {Boolean}  outputX  [true] This is the background color of the accordion before it is expanded. 
/// @prop {Boolean}  outputY  [true] This is the background color of the accordion before it is expanded. 
/// @prop {Boolean}  selectorX  ["sides"] This is the background color of the accordion before it is expanded. 
/// @prop {Boolean}  selectorY  ["ends"] This is the background color of the accordion before it is expanded. 


$config: (
  "outputMargin": false,
  "outputPadding": true,
  "outputX": true,
  "outputY": true,
  "selectorX": "sides",
  "selectorY": "ends"
);

/// Sizes Map
/// @type Map

$sizes: (
  "small" : (
    "initial" : (
      "size" : 2rem
    ),
    "medium" : (
      "direction" : "min",
      "size": 4rem
    )
  ),
  "large" : (
    "initial" : (
      "size" : 4rem
    ),
    "medium" : (
      "direction" : "min",
      "size" : 8rem
    ),
  )
);

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

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

/// Set sizes map
/// @param {Map} $changes Map of changes
/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]

@mixin set-sizes($changes, $merge-mode: null) {
  $sizes: utils.map-merge($sizes, $changes, $merge-mode) !global;
}

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

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

/// Outputs adaptive spacing component styles
/// @example scss
///  @include ulu.component-adaptive-spacing-styles();

@mixin styles {
  $prefixMargin: selector.class("adaptive-margin");
  $prefixPadding: selector.class("adaptive-padding");
  $hasMargin: map.get($config, "outputMargin");
  $hasPadding: map.get($config, "outputPadding");
  
  @each $name, $breakpoints in $sizes {
    $sizePrefixMargin: "#{ $prefixMargin }-#{ $name }";
    $sizePrefixPadding: "#{ $prefixPadding }-#{ $name }";
    @each $breakpoint, $props in $breakpoints {
      $direction: map.get($props, "direction");
      $value: map.get($props, "size");
      // If no direction it is the default
      @if $direction == null {
        @if $hasMargin {
          @include -classes-for-type($sizePrefixMargin, "margin", $value);
        }
        @if $hasPadding {
          @include -classes-for-type($sizePrefixPadding, "padding", $value);
        }
      } @else {
        @include breakpoint.from($breakpoint, $direction) {
          @if $hasMargin {
            @include -classes-for-type($sizePrefixMargin, "margin", $value);
          }
          @if $hasPadding {
            @include -classes-for-type($sizePrefixPadding, "padding", $value);
          }
        }
      }
    }
  }
}

@mixin -classes-for-type($prefix, $prop, $value) {
  #{ $prefix } {
    #{ $prop }: $value;
  }
  @if (map.get($config, "outputX")) {
    #{ $prefix }-#{ map.get($config, "selectorX")} {
      #{ $prop }-left: $value;
      #{ $prop }-right: $value;
    }
    #{ $prefix }-left {
      #{ $prop }-left: $value;
    }
    #{ $prefix }-right {
      #{ $prop }-right: $value;
    }
  }
  @if (map.get($config, "outputY")) {
    #{ $prefix }-#{ map.get($config, "selectorY")} {
      #{ $prop }-top: $value;
      #{ $prop }-bottom: $value;
    }
    #{ $prefix }-top {
      #{ $prop }-top: $value;
    }
    #{ $prefix }-bottom {
      #{ $prop }-bottom: $value;
    }
  }
}