////
/// @group hero
////

@use "sass:map";
@use "sass:math";
@use "sass:list";

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

/// Module Settings
/// @type Map
/// @prop {Map} extra-split-ratios  [wide 70/30] A map where the name is the modifier and the value is a list with two percentages (the first percentage will be correspond with the graphic or content depending on selector [ie. .hero--split-graphic-[name] would apply the first percentage to the graphic while hero--split-content-[name] would apply the first percentage to the content]) 
/// @prop {String} breakpoint ["medium"] At what breakpoint the hero goes to small screen styling.
/// @prop {Dimension} height [100vh] Height of the hero.
/// @prop {Dimension} height-compact [40vh] Height of the hero when using the "--compact" styling.
/// @prop {Dimension} graphic-height-stacked [60vh] Height of the graphic.
/// @prop {Dimension} content-max-width [40rem] Max width of the content.
/// @prop {Dimension} content-padding-top [3rem] Top padding of the content.
/// @prop {Dimension} content-padding-bottom [3rem] Bottom padding of the content.
/// @prop {CssValue} text-align [center] Text align of the content.


$config: (
  "breakpoint" : "medium",
  "height" : 100vh,
  "height-compact" : 40vh,
  "graphic-height-stacked" : 60vh,
  "content-max-width" : 40rem,
  "content-padding-top" : 3rem,
  "content-padding-bottom" : 3rem,
  "text-align" : center,
  "extra-split-ratios" : (
    "wide" : (60%, 40%)
  )
) !default;

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

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

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

@mixin styles {
  $prefix: selector.class("hero");
  $height: get("height");
  $breakpoint: get("breakpoint");

  #{ $prefix } {
    display: flex;
    flex-direction: column;
    text-align: get("text-align");
  }
  #{ $prefix }__content-container {
    padding-top: get("content-padding-top");
    padding-top: get("content-padding-bottom");
  }
  #{ $prefix }__content-inner {
    max-width: get("content-max-width");
    margin-left: auto;
    margin-right: auto;
  }
  #{ $prefix }__graphic {
    position: relative;
    flex-grow: 1;
    width: 100%;
  }
  #{ $prefix }__graphic-media {
    @include layout.absolute-fill(true);
    object-fit: cover;
  }
  
  
  
  // This doesn't interfere with overlay
  #{ $prefix }--top {
    #{ $prefix }__graphic {
      @include breakpoint.min($breakpoint) {
        order: -1;
      }
    }
  }
  // These are shared between overlay and split style
  @include breakpoint.min($breakpoint) {
    #{ $prefix }--right,
    #{ $prefix }--left {
      text-align: right;
      flex-direction: row;
      #{ $prefix }__graphic,
      #{ $prefix }__content {
        flex: 1 0 50%;
      }
      #{ $prefix }__content {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }
    #{ $prefix }--right {
      #{ $prefix }__content-inner {
        margin-right: 0;
      }
    }
    #{ $prefix }--left {
      text-align: left;
      #{ $prefix }__graphic {
        order: -1;
      }
      #{ $prefix }__content-inner {
        margin-left: 0;
      }
    }
  }
  #{ $prefix }--split {
    @include breakpoint.min($breakpoint) {
      min-height: $height;
    }
    #{ $prefix }__graphic {
      @include breakpoint.max($breakpoint) {
        height: get("graphic-height-stacked");
      }
    }
  }

  @if get("extra-split-ratios") {
    @include breakpoint.min($breakpoint) {
      @each $name, $ratio in get("extra-split-ratios") {
        #{ $prefix }--split-graphic-#{ $name } #{ $prefix }__graphic,
        #{ $prefix }--split-content-#{ $name } #{ $prefix }__content {
          flex-basis: list.nth($ratio, 1);
        }
        #{ $prefix }--split-graphic-#{ $name } #{ $prefix }__content,
        #{ $prefix }--split-content-#{ $name } #{ $prefix }__graphic {
          flex-basis: list.nth($ratio, 2);
        }
      }
    }
  }
  

  #{ $prefix }--overlay {
    position: relative;
    justify-content: center;
    min-height: $height;
    #{ $prefix }__content { 
      position: relative;
      z-index: 2;
    }
    #{ $prefix }__graphic {
      @include layout.absolute-fill();
    }
    &#{ $prefix }--bottom,
    &#{ $prefix }--bottom #{ $prefix }__content {
      justify-content: flex-end;
    }
    &#{ $prefix }--top,
    &#{ $prefix }--top #{ $prefix }__content {
      justify-content: flex-start;
    }
  }
  #{ $prefix }--compact {
    min-height: get("height-compact");
  }
}