// Inspired by https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995
// This file is excluded from stylelint, because stylelint is only set up to lint styled-components at the moment.

// SET-UP
// theme.scss is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
// _themed.scss will be copied to each theme folder in /dist, where the theme.scss file for that theme will be.
@import "./theme.scss";

// In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
// so we need to map-get "default" to access it.
$theme: map-get($theme, "default");

// FUNCTIONS
// This function will allow you to get any value from the theme.
// @param {string} $key - the period-separated path to the value in the theme object. e.g., "colors.text.body"
@function t($key) {
  $keys: _str-split($key, ".");
  @return _map-deep-get($theme, $keys);
}

// The rest of the functions are convenience methods to get theme values for subsets of the theme.
// @param {string} $key - the period-separated path to the value in the theme object, with "colors." omitted. e.g., "text.body"
@function colors($key) {
  $keys: _str-split($key, ".");
  @return _map-deep-get($theme, join("colors", $keys));
}

// @param {string} $key - the period-separated path to the value in the theme object, with "typography." omitted. e.g., "100.fontSize"
@function typography($key) {
  $keys: _str-split($key, ".");
  @return _map-deep-get($theme, join("typography", $keys));
}

// @param {string} $key - the period-separated path to the value in the theme object, with "fontWeights." omitted. e.g., "normal"
@function fontWeights($key) {
  $keys: _str-split($key, ".");
  @return _map-deep-get($theme, join("fontWeights", $keys));
}

// @param {string} $key - the period-separated path to the value in the theme object, with "space." omitted. e.g., "100"
@function space($key) {
  $keys: _str-split($key, ".");
  @return _map-deep-get($theme, join("space", $keys));
}

// @param {string} $key - the period-separated path to the value in the theme object, with "radii." omitted. e.g., "inner"
@function radii($key) {
  $keys: _str-split($key, ".");
  @return _map-deep-get($theme, join("radii", $keys));
}

// @param {string} $key - the period-separated path to the value in the theme object, with "borders." omitted. e.g., "500"
@function borders($key) {
  $keys: _str-split($key, ".");
  @return _map-deep-get($theme, join("borders", $keys));
}

// @param {string} $key - the period-separated path to the value in the theme object, with "borderWidths." omitted. e.g., "500"
@function borderWidths($key) {
  $keys: _str-split($key, ".");
  @return _map-deep-get($theme, join("borderWidths", $keys));
}

// @param {string} $key - the period-separated path to the value in the theme object, with "shadows." omitted. e.g., "low"
@function shadows($key) {
  $keys: _str-split($key, ".");
  @return _map-deep-get($theme, join("shadows", $keys));
}

// @param {string} $key - the period-separated path to the value in the theme object, with "easing." omitted. e.g., "ease_in"
@function easing($key) {
  $keys: _str-split($key, ".");
  @return _map-deep-get($theme, join("easing", $keys));
}

// @param {string} $key - the period-separated path to the value in the theme object, with "duration." omitted. e.g., "fast"
@function duration($key) {
  $keys: _str-split($key, ".");
  @return _map-deep-get($theme, join("duration", $keys));
}

// UTILITIES
// Helper functions that power the functions above. Not relevant to the theme.
// If you import this file with @use, these functions will be excluded because they are private.

// Via https://stackoverflow.com/a/42295154
// Used to split period-separated object keys, e.g. "colors.text.body" => ["colors", "text", "body"]
// Only works with a single-character separator.
@function _str-split($string, $separator) {
  // empty array/list
  $split-arr: ();
  // first index of separator in string
  $index: str-index($string, $separator);
  // loop through string
  @while $index != null {
    // get the substring from the first character to the separator
    $item: str-slice($string, 1, $index - 1);
    // push item to array
    $split-arr: append($split-arr, $item);
    // remove item and separator from string
    $string: str-slice($string, $index + 1);
    // find new index of separator
    $index: str-index($string, $separator);
  }
  // add the remaining string to list (the last item)
  $split-arr: append($split-arr, $string);

  @return $split-arr;
}

// Adapted from https://css-tricks.com/snippets/sass/deep-getset-maps/
// Iterates over a list of keys to read multi-level maps.
// e.g., _map-deep-get((colors: (text: (body: "#364141"))), ["colors", "text", "body"]) => "#364141"
@function _map-deep-get($map, $keys) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }
  @return $map;
}