@import "../core/exports";
@import "../core/ios";

// Theme specific variables - inherited from global variables

// Background
$mbsc-ios-input-background: $mbsc-input-background-light !default;
$mbsc-ios-dark-input-background: $mbsc-input-background-dark !default;
// Border
$mbsc-ios-input-border: $mbsc-input-border-light !default;
$mbsc-ios-dark-input-border: $mbsc-input-border-dark !default;
// Text
$mbsc-ios-input-text: $mbsc-input-text-light !default;
$mbsc-ios-dark-input-text: $mbsc-input-text-dark !default;
// Error
$mbsc-ios-input-error: $mbsc-input-error-light !default;
$mbsc-ios-dark-input-error: $mbsc-input-error-dark !default;

$mbsc-ios-colors: map-merge($mbsc-ios-colors, (
  'input-background': $mbsc-ios-input-background,
  'input-border': $mbsc-ios-input-border,
  'input-text': $mbsc-ios-input-text,
  'input-error': $mbsc-ios-input-error,
));
$mbsc-ios-dark-colors: map-merge($mbsc-ios-dark-colors, (
  'input-background': $mbsc-ios-dark-input-background,
  'input-border': $mbsc-ios-dark-input-border,
  'input-text': $mbsc-ios-dark-input-text,
  'input-error': $mbsc-ios-dark-input-error,
));

@mixin mbsc-ios-input($theme, $params) {
  @include exports("input.#{$theme}.colors") {

    $background: map-get($params, 'background');
    $text: map-get($params, 'text');
    // get custom params
    $input-background-param: map-get($params, 'input-background');
    $input-border-param: map-get($params, 'input-border');
    $input-text-param: map-get($params, 'input-text');
    $input-error-param: map-get($params, 'input-error');
    // static colors
    $colors: mbsc-ios-colors($params);
    $error: map-get($colors, error);
    // overwrite colors with custom colors
    $text: if($input-text-param, $input-text-param, $text);
    $border-origin: if($input-background-param, $input-background-param, $background);
    $background: if($input-background-param, $input-background-param, lighten($background, 6%));
    $error: if($input-error-param, $input-error-param, $error);
    // calculated colors
    $background-limited: hsl(hue($border-origin), saturation($border-origin), max(lightness($border-origin), 3%));
    $form-text: '';
    $border-color: '';
    @if (lightness($background) > 50%) {
      $form-text: hsl(hue($text), saturation($text), max(lightness($text), 80%));
      $border-color: darken($background-limited, 17%);
    }
    @else {
      $form-text: hsl(hue($text), saturation($text), min(lightness($text), 80%));
      $border-color: lighten($border-origin, 20%);
    }
    // overwrite colors with custom ones if provided
    $border-color:if($input-border-param, $input-border-param, $border-color);

    .mbsc-#{$theme} {
      &.mbsc-input {
        background: $background;
      }

      &.mbsc-input .mbsc-control::-webkit-input-placeholder {
        color: $form-text;
      }

      &.mbsc-input .mbsc-control::-ms-input-placeholder {
        color: $form-text;
      }

      &.mbsc-input .mbsc-control::-moz-placeholder {
        color: $form-text;
      }

      .mbsc-input-wrap input:-webkit-autofill ~ .mbsc-input-fill {
        background: #e8f0fe;
      }

      .mbsc-input-wrap input:-webkit-autofill {
        box-shadow: 0 0 0px 1000px #e8f0fe inset;
      }

      &.mbsc-input .mbsc-label,
      &.mbsc-progress .mbsc-label,
      &.mbsc-input input,
      &.mbsc-input textarea {
        color: $text;
      }

      .mbsc-err-msg {
        color: $error;
      }

      &.mbsc-input:before,
      &.mbsc-input:after,
      &.mbsc-form .mbsc-control-w:before,
      &.mbsc-form .mbsc-control-w:after {
        border-color: $border-color;
      }

      &.mbsc-control-w.mbsc-err:after,
      &.mbsc-control-w.mbsc-err + .mbsc-err:before,
      &.mbsc-control-w.mbsc-err + .mbsc-divider,
      mbsc-input.mbsc-err + mbsc-input &.mbsc-err:before {
        border-top-color: $error;
      }

      /* Box Input and Outline */
      &.mbsc-input-box,
      &.mbsc-input-outline {
        &.mbsc-err {
          border-color: $error;
        }

        .mbsc-err-msg {
          color: $error;
        }
      }

      /* Outline */
      &.mbsc-input-outline {

        /* Row separator */
        &.mbsc-control-w {
          border: 1px solid $border-color;
        }

        &.mbsc-err.mbsc-control-w {
          border-color: $error;
        }
      }
    }
  }
}
