////
/// @group slider
/// Slider/Carousal component that works with the ui/slider.js script
////

@use "sass:map";

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

/// Module Settings
/// @type Map
/// @prop {Color} background-color [transparent] Background color for the entire slider section.
/// @prop {Dimension} margin [(1rem 0 3rem 0)] Margin for slider container
/// @prop {Dimension} padding-top [0] Top padding for individual slides.
/// @prop {Dimension} button-offset-x [null] Offsets the control button in from their respective sides.
/// @prop {Dimension} button-offset-y [null] Offsets the control button y
/// @prop {Dimension} button-margin [0.75rem] The margin between the controls and the slide content when using .slider__slide-gap-for-controls
/// @prop {Color} nav-margin [(0.5rem 0)] Margin for nav (dots)
/// @prop {Color} nav-background-color [transparent] The color of the dot when unselected.
/// @prop {Color} nav-background-color-hover [color.get("link")] The color of the dot when hovered.
/// @prop {Color} nav-background-color-selected [color.get("link")] The color of the dot when selected.
/// @prop {Dimension} nav-border-radius [50%] The border-radius of the dot.
/// @prop {Color} nav-border-color [color.get("link")] The border color of the dot.
/// @prop {Color} nav-border-color-hover [color.get("link")] The border color of the dot when hovered.
/// @prop {Color} nav-border-color-selected [color.get("link")] The border color of the dot when selected.
/// @prop {Dimension} nav-border-width [2px] The border width of the dot.
/// @prop {Dimension} nav-size  [1rem] The height and width of the dot.
/// @prop {Dimension} nav-gap  [0.2rem] Gap between nav items
/// @prop {Dimension} button-width  [1rem] The width of the button.

$config: (
  "background-color" : transparent,
  "margin" : (1rem 0 3rem 0),
  "padding-bottom" : 0,
  "padding-top" : 0,
  "button-offset-x" : null,
  "button-offset-y" : null,
  "button-margin" : 2rem,
  "button-width": 2.5rem,
  "nav-background-color" : transparent,
  "nav-background-color-hover" : "link",
  "nav-background-color-selected" : "link",
  "nav-border-color" : "link",
  "nav-border-color-hover" : "link",
  "nav-border-color-selected" : "link",
  "nav-border-radius" : 50%,
  "nav-gap" : 0.2rem,
  "nav-border-width" : 2px,
  "nav-size" :  1rem,
  "nav-margin" : (0.5rem 0),
  
  ) !default;
  
/// Change modules $config
/// @param {Map} $changes Map of changes
/// @example scss 
///   @include ulu.component-slider-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-slider-get("property");

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

/// Output component stylesheet
/// @example scss
///  @include ulu.component-slider-styles();

@mixin styles {
  $prefix: selector.class("slider");
  $prefix-plugin: selector.class("Slider");
  $slide-padding-x: get("button-width") + get("button-margin");
  #{ $prefix } {
    position: relative; // for controls
    background-color: color.get(get("background-color"));
    margin: get("margin");
  }
  #{ $prefix }__track,
  #{ $prefix-plugin }__controls,
  #{ $prefix-plugin }__nav {
    list-style: none !important;
    padding-left: 0;
  }
  #{ $prefix-plugin }__control-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    margin-top: get("button-offset-y");
  }
  #{ $prefix-plugin }__nav {
    display: flex;
    justify-content: center;
    margin: get("nav-margin");
    gap: get("nav-gap");
  }
  #{ $prefix-plugin }__nav-button {
    display: block;
    width: get("nav-size");
    height: get("nav-size");
    background-color: color.get(get("nav-background-color"));
    border: get("nav-border-width") solid color.get(get("nav-border-color"));
    border-radius: get("nav-border-radius");
    &:hover {
      background-color: color.get(get("nav-background-color-hover"));
      border-color: color.get(get("nav-border-color-hover"));
    }
  }
  #{ $prefix-plugin }__nav-button--active,
  #{ $prefix-plugin }__nav-button--active:hover {
    background-color: color.get(get("nav-background-color-selected"));
    border-color: color.get(get("nav-border-color-selected"));
  }
  #{ $prefix-plugin }__control-button,
  #{ $prefix-plugin }__nav-button {
    transition-property: color, background-color, border-color;
    transition-duration: 300ms;
  }
  #{ $prefix }__title {
    margin-top: -1.5rem !important;
    margin-bottom: 1rem !important;
    padding-bottom: 1rem;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.075);
  }
  #{ $prefix }__track {
    // @daniel test this
    #{ $prefix }--vertical-center & {
      align-items: center;
    }
  }
  // Options inner container to limit the controls to the just the track aria
  // in order to exclude the dots/nav from the positioning of the controls
  #{ $prefix }__control-context {
    position: relative;
  }
  #{ $prefix }__slide {
    margin: 0;
  }
  #{ $prefix }--slide-control-margins {
    #{ $prefix }__slide {
      padding: get("padding-top") $slide-padding-x get("padding-bottom") $slide-padding-x;
    }
  }
  #{ $prefix }__slide-gap-for-controls {
    $padding:  get("button-width") + get("button-margin");
    padding-left: $padding;
    padding-right: $padding;
  }
  #{ $prefix-plugin }__control-button--previous {
    left: 0;
    margin-left: get("button-offset-x");
  }
  #{ $prefix-plugin }__control-button--next {
    right: 0;
    margin-right: get("button-offset-x");
  }
  #{ $prefix }--inset-controls {
    #{ $prefix }__slide-gap-for-controls {
      $padding: get("button-width") + get("button-margin") + get("button-offset-x");
      padding-left: $padding;
      padding-right: $padding;
    }
    #{ $prefix-plugin }__control-button--previous {
      left: 0;
      margin-left: get("button-offset-x");
    }
    #{ $prefix-plugin }__control-button--next {
      right: 0;
      margin-right: get("button-offset-x");
    }
  }
}