@use "../config";

@use 'sass:math';
@use 'sass:list';
@use 'sass:string';
@use 'sass:map';

@function rm-unit($value) {
  @return math.div($value, ($value * 0 + 1));
}

/*
 * Converts PX to EM values
 * @see utils/_config.scss for $base-font-size
 *
 * @param $value (string): e.g. `16px`
 * @return (string): e.g. `1em`
 */
@function toEm($value, $unit: 'em') {
  $rm-unit-value: rm-unit($value);

  @if $rm-unit-value == 0 {
    @return 0;
  }

  @return #{math.div($rm-unit-value, rm-unit(config.$base-font-size))}#{$unit};
}

/*
 * Converts PX to REM values (document root relative EM)
 * @see utils/_config.scss for $base-font-size
 *
 * @param $value (string): e.g. `16px`
 * @return (string): e.g. `1rem`
 */
@function toRem($value) {
  @if ends-with($value + '', 'px') {
    @return toEm($value, 'rem');
  }
  @return $value;
}

@function color($color) {
  @if map.has-key(config.$colors, $color) {
    @return var(--color-#{$color});
  }

  @return var(--color-#{$color}, $color);
}

@function color-mode($mode: '') {
  @if $mode != '' and map.has-key(config.$color-modes, $mode) {
    @return map.get(map.get(config.$color-modes, $mode), 'colors');
  }

  @return config.$colors;
}

@function get-color($color, $mode: '') {
  @return map.get(color-mode($mode), $color);
}

@function trim-end($haystack, $needle) {
  @if ends-with($haystack, $needle) {
    @return string.slice($haystack, 1, -(string.length($needle) + 1));
  }
  @return $haystack;
}

@function ends-with($haystack, $needle) {
  @return string.slice($haystack, string.length($haystack) - string.length($needle) + 1) == $needle;
}

@function str-replace($string, $search, $replace: '') {
  $index: string.index($string, $search);

  @if $index {
    @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
  }

  @return $string;
}

@function bubble-sort($list) {
  $length: list.length($list);
  $temp: null;

  @for $i from 1 through $length {
    @for $j from 1 through $length - $i {
      @if $j == 0 {
        $j: 1;
      }
      $a: list.nth($list, $j);
      $b: list.nth($list, $j + 1);

      @if $a > $b {
        $temp: $a;
        $list: list.set-nth($list, $j, $b);
        $list: list.set-nth($list, $j + 1, $temp);
      }
    }
  }

  @return $list;
}


@function reverse-map($map, $rm-unit: false) {
  $reverse-map: ();

  @each $key, $value in $map {
    @if $rm-unit {
      $value: rm-unit($value);
    }
    $reverse-map: map.merge($reverse-map, ($value: $key));
  }

  @return $reverse-map;
}

/**
 * Turns a format of ('xxl': 1680px, 'xl': 1366px, 'lg': 1024px, 'md': 768px, 'sm': 420px) into a map of breakpoints: ("": (false, 419px), "sm": (420px, 767px), "md": (768px, 1023px), "lg": (1024px, 1365px), "xl": (1366px, 1679px), "xxl": (1680px, false))
 */
@function breakpoints($map) {
  $reverse-map: reverse-map($map);
  $values-list: map.keys($reverse-map);
  $sorted-values: $values-list;
  @if list.length($values-list) > 1 {
    $sorted-values: bubble-sort($values-list);
  }
  $breakpoints: ();
  $min: false;
  $max: false;
  $sorted-values-length: list.length($sorted-values);

  $breakpoints: map.merge($breakpoints, ('': (false, list.nth($sorted-values, 1) - 1)));

  @for $i from 1 through $sorted-values-length {
    $sorted-key: list.nth($sorted-values, $i);
    $key: map.get($reverse-map, $sorted-key);
    $value: map.get($map, $key);
    
    $next-index: $i + 1;
    @if $next-index > $sorted-values-length {
      $next-index: $sorted-values-length;
    }
    $next-value: list.nth($sorted-values, $next-index);

    @if $i == 1 {
      $min: $value;
    } @else {
      $min: $value;
    }

    @if $i == list.length($sorted-values) {
      $max: false;
    } @else {
      $max: $next-value - 1
    }

    @if not $min {
      $min: false;
    }

    @if not $max {
      $max: false;
    }

    $breakpoints: map.merge($breakpoints, ($key: ($min, $max)));
  }

  @return $breakpoints;
}

@mixin selection($color: primary) {
  ::selection { background: color($color); }
}

/* stylelint-disable */

//TODO: CHECK 👇

@mixin placeholder($color) {
  &::-webkit-input-placeholder,
  &::-moz-placeholder,
  &:-ms-input-placeholder,
  &:-moz-placeholder,
  &::placeholder {
    color: color($color);
  }
}

@mixin bg-image($filename, $ext: png) {
  background-image: url('#{config.$image_dir}#{$filename}.#{$ext}');
}

@mixin bg-image-retina($filename, $ext: png) {
  @include bg-image($filename, $ext);

  @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
    background-image: url('#{config.$image_dir}#{$filename}@2x.#{$ext}');
  }
}

@mixin icon($filename, $w, $h, $ext: png) {
  background-image: url('#{config.$image_dir}#{$filename}.#{$ext}');
  background-size: $w $h;
  background-position: center center;
  background-repeat: no-repeat;
  display: inline-block;
  width: $w;
  height: $h;
  line-height: $h;
  vertical-align: middle;
  margin-top: -3px;
}

@mixin icon-retina($filename, $w, $h, $ext: png) {
  @include icon($filename, $w, $h, $ext);

  @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
    background-image: url('#{config.$image_dir}#{$filename}@2x.#{$ext}');
  }
}