////
/// @group placeholder-block
////

@use "sass:map";
@use "sass:meta";

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

// Used for function fallback
$-fallbacks: (
  "border-radius" : (
    "function" : meta.get-function("get", false, "element"),
    "property" : "border-radius-large"
  ),
  "color" : (
    "function" : meta.get-function("get", false, "color"),
    "property" : "type-tertiary"
  ),
  "margin-bottom": (
    "function" : meta.get-function("get", false, "element"),
    "property" : "margin"
  ),
);

// todos [joe-check] for the config options, compact is at the end in this module (padding-compact) but at the beginning in card-grid(gap-compact) Line 35

/// Module Settings
/// @type Map
/// @prop {Color} background-color [rgba(0,0,0,0.15)] The background color of the placeholder.
/// @prop {Color} color [true] The type color of the placeholder. If set to true, will use the "type-tertiary" variable from color.scss.
/// @prop {Dimension} margin-bottom [true] The bottom margin of the placeholder. If set to true, will use the "margin" variable from element.scss.
/// @prop {Dimension} padding [2em] The padding of the placeholder.
/// @prop {Dimension} padding-compact [(0.5em 1em)] The padding of the placeholder when using the compact option.
/// @prop {Dimension} expanded-height [15rem] The height of the placeholder when using the expanded option.
/// @prop {Color} border-color [rgba(0,0,0,0.3)] The border color.
/// @prop {Dimension} border-radius [true] The border radius of the placeholder. If set to true, will use the "border-radius-large" variable from element.scss.
/// @prop {CssValue} border-style [dashed] The border style of the placeholder border.
/// @prop {Dimension} border-width [2px] The border width of the placeholder.
/// @prop {Dimension} border-width-compact [1px] The border width of the placeholder when using the compact option.
/// @prop {Dimension} icon-font-size [3em] The font-size of the placeholder icon.
/// @prop {Dimension} icon-margin [0.25em] The margin of the placeholder icon.
/// @prop {Color} icon-color [rgba(0, 0, 0, 0.5)] The icon type color.


$config: (
  "background-color" : rgba(0,0,0,0.15),
  "color" : true,
  "expanded-height" : 15rem,
  "margin-bottom" : true,
  "padding" : 2em,
  "padding-compact" : (0.5em 1em),

  "border-color" : rgba(0,0,0,0.3),
  "border-radius" : true,
  "border-style" : dashed,
  "border-width" : 2px,
  "border-width-compact" : 1px,
  "icon-color" : rgba(0, 0, 0, 0.5),
  "icon-font-size" : 3em,
  "icon-margin" : 0.25em,
) !default;


/// Change modules $config
/// @param {Map} $changes Map of changes
/// @example scss
///   @include ulu.component-placeholder-block-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-placeholder-block-get("property");

@function get($name) {
  $value: utils.require-map-get($config, $name, "placeholder [config]");
  @return utils.function-fallback($name, $value, $-fallbacks);
}

/// Prints component styles
/// @example scss
///  @include ulu.component-placeholder-block-styles();

@mixin styles {
  $prefix: selector.class("placeholder-block");

  #{ $prefix } {
    background-color: color.get(get("background-color"));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: get("padding");
    color: color.get(get("color"));
    border: get("border-width") get("border-style") color.get(get("border-color"));
    margin-bottom: get("margin-bottom");
    border-radius: get("border-radius");
  }
  #{ $prefix }__icon {
    color: color.get(get("icon-color"));
    display: block;
    margin: 0 auto get("icon-margin") auto;
    font-size: get("icon-font-size");
  }
  #{ $prefix }--compact {
    padding: get("padding-compact");
    display: block;
    border-width: get("border-width-compact");
  }
  #{ $prefix }--expanded {
    min-height: get("expanded-height");
  }
}