@import './base.scss';

$mbsc-ios-button: #007bff !default;
$mbsc-ios-accent: #007bff !default;
$mbsc-ios-background: #f7f7f7 !default;
$mbsc-ios-text: #000000 !default;

$mbsc-ios-dark-button: #ff8400 !default;
$mbsc-ios-dark-accent: #ff8400 !default;
$mbsc-ios-dark-background: #000000 !default;
$mbsc-ios-dark-text: #ffffff !default;

/* Base colors */
$mbsc-ios-primary: #3f97f6 !default;
$mbsc-ios-secondary: #90979E !default;
$mbsc-ios-success: #43BE5F !default;
$mbsc-ios-danger: #f5504e !default;
$mbsc-ios-warning: #f8b042 !default;
$mbsc-ios-info: #5BB7C5 !default;
$mbsc-ios-light: #fff !default;
$mbsc-ios-dark: #47494A !default;

$mbsc-ios-colors: ( // Colors map
  'background': $mbsc-ios-background,
  'text': $mbsc-ios-text,
  'accent': $mbsc-ios-accent,
);
$mbsc-ios-dark-colors: ( // Colors map
  'background': $mbsc-ios-dark-background,
  'text': $mbsc-ios-dark-text,
  'accent': $mbsc-ios-dark-accent,
);

@function mbsc-ios-colors($params) {
  $background: map-get($params, 'background');
  $text: map-get($params, 'text');
  $accent: map-get($params, 'accent');

  $button: '';

  @if (map-get($params, 'button')) {
    $button: map-get($params, 'button');
  }

  @else {
    $button: map-get($params, 'accent');
  }

  $background-limited: hsl(hue($background), saturation($background), max(lightness($background), 3%));
  $background-alt: lighten($background-limited, 3%);
  $card-shadow: darken($background, 17%);
  $cont-background: lighten($background, 6%);

  $border-color: '';
  $popup-border: '';
  $label-text: '';
  $button-disabled: '';
  $switch-background: '';
  $snackbar-button: '';
  $slider-tooltip: '';
  $slider-track-step: '';
  $text-alt: '';
  $background-overlay: '';
  $empty-color: '';
  $btn-cont-background: '';

  // Light background
  @if (lightness($background) > 50%) {
    $border-color: darken($background-limited, 17%);
    $popup-border: $border-color;
    $label-text: lighten($text, 67%);
    $button-disabled: darken($background, 13%);
    $switch-background: darken($background, 7%);
    $slider-tooltip: darken($background, 26%);
    $slider-track-step: darken($background, 10%);
    $text-alt: lighten($text, 53%);
    $background-overlay: rgba(#000, .2);
    $empty-color: lighten($text, 43%);
    $btn-cont-background: darken($background, 3%);
    $snackbar-button: hsl(hue($button), saturation($button), max(lightness($button), 80%));
  }

  // Dark background
  @else {
    $border-color: lighten($background, 20%);
    $popup-border: lighten($border-color, 13%);
    $label-text: $text;
    $button-disabled: lighten($background, 13%);
    $switch-background: #fff;
    $slider-tooltip: lighten($background, 70%);
    $slider-track-step: lighten($background, 27%);
    $text-alt: darken($text, 33%);
    $background-overlay: rgba(#fff, .1);
    $empty-color: $text;
    $btn-cont-background: lighten($background-limited, 8%);
    $snackbar-button: $button;
  }



  @return ('cont-background': $cont-background,
    'border-color': $border-color,
    'background-alt': $background-alt,
    'card-shadow': $card-shadow,
    'popup-border': $popup-border,
    'background-limited': $background-limited,
    'label-text': $label-text,
    'button-disabled': $button-disabled,
    'switch-background': $switch-background,
    'snackbar-button': $snackbar-button,
    'slider-tooltip': $slider-tooltip,
    'slider-track-step': $slider-track-step,
    'text-alt': $text-alt,
    'background-overlay': $background-overlay,
    'empty-color': $empty-color,
    'btn-cont-background': $btn-cont-background,
    'button': $button,
    /* static colors */
    'error': #d8332a,
    'white-text': #fff,
    'dark-text': #000);
}

@mixin mbsc-ios-common($theme, $params) {
  @include exports("common.#{$theme}.colors") {
    $colors: mbsc-ios-colors($params);
    $empty-color: map-get($colors, empty-color);

    .mbsc-#{$theme} {
      .mbsc-empty {
        color: $empty-color;
      }
    }
  }
}
