////
/// @group flipcard
////
/// Flipcard (content revealed on backside of card after click)

@use "sass:map";
@use "../color";
@use "../utils";
@use "../selector";

/// Module Settings
/// @type Map
/// @prop {Color} background-color [white] Background color of the text-only flipcard front.
/// @prop {Color} background-color-image [rgba(96, 255, 255, 0.89)] Background color of the image flipcard front.
/// @prop {Number} image-opacity [0.7] Opacity of the image to allow shading from the background color.
/// @prop {Color} background-color-back [rgb(178, 178, 178)] Background color on the back of the flipcard.
/// @prop {Color} border [1px solid black] Flipcard border.
/// @prop {Dimension} border-radius [6px] Border radius for flipcard.
/// @prop {Color} border-color-hover [black] border color when hovered.
/// @prop {CssValue} control-button-border-focus [2px solid blue] Border that shows when focused.
/// @prop {Time} anim-duration [430ms] Animation duration.
/// @prop {Time} anim-delay [200ms] Animation delay.
/// @prop {Dimension} padding [1.5rem] Padding for the flipcard.
/// @prop {Color} title-color [red] Color of the front page text.
/// @prop {Color} title-color-hover [green] Color of the front page text when hovered or focused.
/// @prop {Color} icon-color [pink] Color of the icon.
/// @prop {Color} icon-color-hover [aqua] Color of the icon when hovered or focused.
/// @prop {Color} icon-color-image [aqua] Color of the icon when using an image.
/// @prop {Color} icon-color-image-hover [pink] Color of the icon when using an image and hovered or focused.
/// @prop {Color} title-color-image [black] Color of the front page text when using an image.
/// @prop {Color} title-color-image-hover [blue] Color of the front page text when using an image and hovered or focused.
/// @prop {Boolean} bottom-shadow [true] Boolean that enables a bottom shadow to the image flipcard.

$config: (
  "anim-delay" : 200ms,
  "anim-duration" : 430ms,
  "anim-front-close": "FlipcardFrontClose",
  "anim-front-open": "FlipcardFrontOpen",
  "anim-back-open": "FlipcardBackOpen",
  "anim-timing-function": ease-out,
  "background-color" : white,
  "background-color-image" : rgba(96, 255, 255, 0.89),
  "background-color-back" : rgb(178, 178, 178),
  "bottom-shadow" : true,
  "border" : 1px solid black,
  "border-color-hover" : black,
  "border-radius" : 6px,
  "control-button-border-focus" : 2px solid blue,
  "icon-color" : pink,
  "icon-color-hover" : aqua,
  "icon-color-image" : aqua,
  "icon-color-image-hover" : pink,
  "image-opacity" : 0.7,
  "padding" : 1.5rem,
  "title-color" : red,
  "title-color-hover" : green,
  "title-color-image" : black,
  "title-color-image-hover" : blue,
);

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

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

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

@mixin styles {
  $prefix: selector.class("flipcard");

  #{ $prefix } {
    height: 100%;
    background-color: color.get(get("background-color"));
    line-height: 1.4;
    overflow: hidden;
    position: relative;
    border: get("border");
    border-radius: get("border-radius");
    &#{ $prefix }:hover {
      border-color: color.get(get("border-color-hover"));
    }
    #{ $prefix }__control-button:focus {
      border: get("control-button-border-focus");
    }
  }
  #{ $prefix }__front,
  #{ $prefix }__back {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  
  #{ $prefix }__front {
    // To lay the image out on top of the text
    display: grid;
    grid-template-columns: 1fr;
    justify-items: stretch;
    grid-template-areas: "flipcard-front";
    &:hover {
      #{ $prefix }__front-image {
        transition-duration: 8000ms;
        transition-delay: 0;
        transform: scale(1.15);
      }
      #{ $prefix }__front-content {
        color: color.get(get("title-color-hover"));
      }
      #{ $prefix }__icon {
        color: color.get(get("icon-color-hover"));
      }
    }
    @media (prefers-reduced-motion: no-preference) {
      [data-flipcard-state="open"] & {
        opacity: 0;
        animation: get("anim-front-close") get('anim-duration') get("anim-timing-function") forwards;
      }
      [data-flipcard-state="closed"] & {
        animation: get("anim-front-open") get('anim-duration') get("anim-timing-function") forwards;
      }
    }
  }
  #{ $prefix }--w-image {
    background-color: color.get(get("background-color-image"));

    &:hover {
      #{ $prefix }__front-content {
        color: color.get(get("title-color-image-hover"));
      }
      #{ $prefix }__icon {
        color: color.get(get("icon-color-image-hover"));
      }
    }
  }
  #{ $prefix }__front-image,
  #{ $prefix }__front-content {
    grid-area: flipcard-front / flipcard-front / flipcard-front / flipcard-front;
  }
  #{ $prefix }__front-image {
    display: block;
    @media (prefers-reduced-motion) {
      transition: transform 1000ms 200ms get("anim-timing-function");
    }
    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      opacity: get("image-opacity");
    }
  }
  #{ $prefix }__icon {
    color: color.get(get('icon-color'));
    display: block;
    margin-top: 0.5rem;
  }
  #{ $prefix }__front-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: color.get(get("title-color"));
    position: relative;
    z-index: 2;
    padding: get('padding');
    align-self: end;
    transition: transform 350ms get("anim-timing-function");    
  }
  #{ $prefix }--w-image {
    #{ $prefix }__icon {
      color: color.get(get("icon-color-image"));
    }
    #{ $prefix }__front-content {
      color: color.get(get("title-color-image"));
      @if(get("bottom-shadow")) {
        // bottom position includes padding so that the shadow 
        &::after {
          content: '';
          display: block;
          position: absolute;
          bottom: calc(0rem - get('padding'));
          top: 0;
          left: 0;
          right: 0;
          background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
          z-index: -1;
        }
      }
    }
  }
  #{ $prefix }__back {
    background-color: color.get(get("background-color-back"));
    padding: get('padding');
    justify-content: flex-end;
    [data-flipcard-state="open"] & {
      animation: get("anim-back-open") get('anim-duration') get("anim-timing-function") forwards;
      @media (prefers-reduced-motion) {
        animation: UluFadeIn 430ms get("anim-timing-function");
      }
    }
  }
  @keyframes FlipcardBackOpen {
    0% {
      opacity: 0;
      transform: translateY(100%);
    }
    30% {
      opacity: 0;
      transform: translateY(100%);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes FlipcardFrontClose {
    0% {
      opacity: 1;
    }
    80% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes FlipcardFrontOpen {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  #{ $prefix }--center-title {
    #{ $prefix }__front-content {
      justify-content: center;
      align-items: center;
    }
    #{ $prefix }__back-content {
      #{ $prefix }__icon-container {
        display: flex;
        justify-content: center;
        width: 100%;
      }
    }
  }
  #{ $prefix }--bottom-title {
    #{ $prefix }__front-content {
      justify-content: flex-end;
    }
  }
  #{ $prefix }:not(#{ $prefix }--bottom-title, #{ $prefix }--center-title) {
    #{ $prefix }__front-content {
      align-items: center;
      justify-content: center;
      position: relative;
      padding-top: calc(get("padding") + 1.2rem);
      padding-bottom: calc(get("padding") + 1.2rem);
      #{ $prefix }__icon-container {
        position: absolute;
        bottom: get("padding");
        right: get("padding");
      }
    }
    #{ $prefix }__back {
      position: relative;
      padding-top: calc(get("padding") + 1.2rem);
      padding-bottom: calc(get("padding") + 1.2rem);
      #{ $prefix }__icon-container {
        position: absolute;
        bottom: get("padding");
        right: get("padding");
      }
    }
  }
  // modifier for animations
  #{ $prefix }--animation:hover {
    #{ $prefix }__front-content {
      transform: translateY(-(get('padding') * 0.5));
    }
  }
}