////
/// @group tabs
/// Tab interface component styles, for aria based tab interface
////

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

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

// Used for function fallback
$-fallbacks: (
  "tablist-divider" : (
    "function" : meta.get-function("get-rule-style", false, "element"),
    "arguments" : ("light",)
  ),
  "tab-font-weight" : (
    "function" : meta.get-function("get", false, "typography"),
    "property" : "font-weight-semibold"
  ),
  "vertical-breakpoint" : (
    "function" : meta.get-function("get", false, "breakpoint"),
    "property" : "default"
  )
);

/// Module Settings
/// @type Map
/// @prop {Dimension} margin [(2rem, 0)] The margin for the tabs container
/// @prop {Dimension} print-margin [1.5em] Margin between tabs when stacked for print
/// @prop {CssValue} tablist-divider [true] The border separating the tabs from the panels. By default (true) will use element rule light style
/// @prop {Dimension} tablist-divider-width [1px] The width of the divider
/// @prop {Color} tabpanel-background-color [rgb(245, 245, 245)] The tabpanel background color.
/// @prop {Dimension} tabpanel-padding [(2rem,)] Padding for the tabpanel
/// @prop {Dimension} indicator-size [0.25em] The size of the tab's active border/indicator
/// @prop {Color} indicator-color [currentColor] The color of the indicator
/// @prop {Color} indicator-transition-duration [200ms] The transition duration for indicator
/// @prop {Color} indicator-scale-start [0] The starting scale for the indicator (set to 1 to disable expanding on click)
/// @prop {Color} tab-color [link] The type color for the tabs. This uses color.scss, so the value of this options should be a variable from color.scss.
/// @prop {Color} tab-color-hover [link-hover] The type color for the tabs when hovered or focused. This uses color.scss, so the value of this options should be a variable from color.scss.
/// @prop {Color} tab-color-selected [selected] The tab type color when selected. This uses color.scss, so the value of this options should be a variable from color.scss.
/// @prop {Color} tab-background-color-selected [null] The tab background color when selected
/// @prop {CssValue} tab-font-weight [true] The font weight for the tab, defaults to typography "font-weight-semibold"
/// @prop {Dimension} tab-padding [0.75em 0.1em 0.75em 0.1em] Padding for the tab
/// @prop {Dimension} tab-gap [1em] Gap between tabs
/// @prop {Dimension} vertical-tablist-width [minmax(15rem, 30%),] The width of the tablist column when tabs are layout is vertical
/// @prop {Dimension} vertical-tab-padding [(0.25em 0.75em)] Tab padding when vertical
/// @prop {Dimension} vertical-divider-width [0px] Divider between tabs and panels when vertical
/// @prop {Dimension} vertical-tab-gap [0.75em] The gap between tabs when vertical
/// @prop {Boolean} vertical-indicator-left [true] The indicator for selected tab should be on the left when vertical (false will be on right/inside)
/// @prop {Boolean} vertical-breakpoint [true] Set the breakpoint when the vertical tabs should switch to horizontal (defaults to breakpoint 'default')
/// @prop {Boolean} horizontal-tab-wrap [false] Set to true to allow line wrapping when the tabs are in horizontal orientation, vertical is always allowed to wrap

$config: (
  "margin" : (2rem 0),
  "print-margin" : 1.5em,
  "tablist-divider" : true,
  "tablist-divider-width" : 1px,
  "indicator-size" : 3px,
  "indicator-color" : currentColor,
  "indicator-transition-duration" : 200ms,
  "indicator-transition-timing" : ease-out,
  "indicator-scale-start" : 0,
  "tab-color" : "type-tertiary",
  "tab-color-hover" : "selected",
  "tab-color-selected" : "selected",
  "tab-background-color-selected" : null,
  "tab-font-weight" : true,
  "tab-padding" : (0.75em),
  "tab-gap" : 1em,
  "tabpanel-background-color" : #f6f6f6,
  "tabpanel-padding" : (2rem),
  "vertical-tablist-width" : minmax(15rem, 30%),
  "vertical-tab-padding" : (0.25em 0.75em),
  "vertical-divider-width" : 0px,
  "vertical-tab-gap" : 0.75em,
  "vertical-indicator-left" : true,
  "vertical-breakpoint" : true,
  "horizontal-tab-wrap" : false
) !default;

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

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

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

@mixin styles {
  @include utils.file-header("component", "tabs");

  $prefix: selector.class("tabs");
  $tabpanel-spacing: utils.get-spacing(get("tabpanel-padding"));

  #{ $prefix } {
    margin: get("margin");
    [role="tablist"] {
      position: relative;
      z-index: 2;
      display: flex; 
      gap: get("tab-gap");
      overflow-x: auto;
      border-bottom: get("tablist-divider");
      border-bottom-width: get("tablist-divider-width");
      @include layout.remove-scrollbar();
    }
    [role="tab"] {
      display: block;
      position: relative; 
      cursor: pointer;
      text-align: center;
      padding: get("tab-padding");
      color: color.get(get("tab-color"));
      font-weight: get("tab-font-weight");
      @if (not get("horizontal-tab-wrap")) {
        white-space: nowrap;
      }
      // Indicator
      &::after {
        content: "";
        position: absolute;
        background-color: color.get(get("indicator-color"));
        opacity: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: get("indicator-size");
        transition-property: opacity, background-color, transform;
        transition-duration: get("indicator-transition-duration");
        transition-timing-function: get("indicator-transition-timing");
        transform: scaleX(get("indicator-scale-start"));
        transform-origin: center;
      }
      &:hover {
        color: color.get(get("tab-color-hover"));
      }
      // Add focus so as user clicks item it starts the active state styling
      &:focus,
      &[aria-selected="true"] {
        outline: none; // We are providing focus styling
        &::after {
          opacity: 1;
          transform: scaleX(1);
        }
      }
      &[aria-selected="true"] {
        color: color.get(get("tab-color-selected"));
        background-color: color.get(get("tab-background-color-selected"));
      }
    }
    [role="tabpanel"] {
      position: relative;
      z-index: 1;
      padding: get("tabpanel-padding");
      overflow: hidden;
      background-color: color.get(get("tabpanel-background-color"));
    }
  }
  // For images, etc that should fill tabpanel
  #{ $prefix }__tabpanel-content-fill {
    margin-left: -(map.get($tabpanel-spacing, "left"));
    margin-right: -(map.get($tabpanel-spacing, "right"));
    width: calc(100% + #{ map.get($tabpanel-spacing, "left") + map.get($tabpanel-spacing, "right") });
    max-width: none;
    &:first-child {
      margin-top: -(map.get($tabpanel-spacing, "top"));
    }
    &:last-child {
      margin-bottom: -(map.get($tabpanel-spacing, "bottom"));
    }
  }

  @include breakpoint.min(get("vertical-breakpoint")) {
    #{ $prefix }--vertical {
      display: grid;
      grid-template-columns: get("vertical-tablist-width") auto; 
      [role="tablist"] {
        flex-direction: column;
        gap: get("vertical-tab-gap");
        border-right: get("tablist-divider");
        border-right-width: get("vertical-divider-width");
        border-bottom: none;
        grid-column: 1;
      }
      [role="tab"] {
        padding: get("vertical-tab-padding");
        white-space: normal;
        text-align: left;
        &::after {
          left: if(get("vertical-indicator-left"), 0, auto);
          right: if(not get("vertical-indicator-left"), 0, auto);;
          bottom: 0;
          top: 0;
          width: get("indicator-size");
          height: auto;
        }
      }
      [role="tabpanel"] {
        grid-column: 2; // needed for equalHeights in vertical
      }
    }
  }

  #{ $prefix }--transparent {
    [role="tablist"] {
      background-color: transparent;
      padding-left: 0;
      padding-right: 0;
    }
    [role="tabpanel"] {
      background-color: transparent;
      padding-left: 0;
      padding-right: 0;
    }
  }

  #{ $prefix }--full-width {
    > [role="tablist"] {
      justify-content: safe center;
    }
    >[role="tabpanel"] {
      background-color: transparent;
      padding: 0;
    }
  }

  // Display all tabs during print
  #{ $prefix }--print {
    @media print {
      [role="tablist"] {
        display: none;
      }
      [role="tabpanel"] {
        display: block;
        + [role="tabpanel"] {
          margin-top: get("print-margin");
        }
      }
    }
  }
}