@import "../core/exports";
@import "../core/ios";
@import "../page/page.ios.colors";
@import "../input/input.ios.colors";
@import "../slider/slider.ios.colors";
@import "../rating/rating.ios.colors";
@import "../notifications/notifications.ios.colors";

// Theme specific variables - inherited from global variables

// General colors for the form
// Background
$mbsc-ios-form-background: $mbsc-form-background-light !default;
$mbsc-ios-dark-form-background: $mbsc-form-background-dark !default;
// Text
$mbsc-ios-form-text: $mbsc-form-text-light !default;
$mbsc-ios-dark-form-text: $mbsc-form-text-dark !default;
// Accent
$mbsc-ios-form-accent: $mbsc-form-accent-light !default;
$mbsc-ios-dark-form-accent: $mbsc-form-accent-dark !default;

// Button
// button background
$mbsc-ios-button-color: $mbsc-button-color-light !default;
$mbsc-ios-dark-button-color: $mbsc-button-color-dark !default;
// button text
$mbsc-ios-button-text: $mbsc-button-text-light !default;
$mbsc-ios-dark-button-text: $mbsc-button-text-dark !default;

// Form Group
// text
$mbsc-ios-form-group-title-text: $mbsc-form-group-title-text-light !default;
$mbsc-ios-dark-form-group-title-text: $mbsc-form-group-title-text-dark !default;

// add variables to light and dark color maps
$mbsc-ios-colors: map-merge($mbsc-ios-colors, (
  'form-background': $mbsc-ios-form-background,
  'form-text': $mbsc-ios-form-text,
  'form-accent': $mbsc-ios-form-accent,
  'button-color': $mbsc-ios-button-color,
  'button-text': $mbsc-ios-button-text,
  'form-group-title-text': $mbsc-ios-form-group-title-text,
));
$mbsc-ios-dark-colors: map-merge($mbsc-ios-dark-colors, (
  'form-background': $mbsc-ios-dark-form-background,
  'form-text': $mbsc-ios-dark-form-text,
  'form-accent': $mbsc-ios-dark-form-accent,
  'button-color': $mbsc-ios-dark-button-color,
  'button-text': $mbsc-ios-dark-button-text,
  'form-group-title-text': $mbsc-ios-dark-form-group-title-text,
));

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

    @include mbsc-ios-page($theme, $params);
    @include mbsc-ios-input($theme, $params);
    @include mbsc-ios-slider($theme, $params);
    @include mbsc-ios-rating($theme, $params);
    @include mbsc-ios-notifications($theme, $params);

    $background: map-get($params, 'background');
    $text: map-get($params, 'text');
    $accent: map-get($params, 'accent');
    // Generic
    $background-param: map-get($params, 'form-background');
    $text-param: map-get($params, 'form-text');
    $accent-param: map-get($params, 'form-accent');
    // Button custom variables
    $button-background-param: map-get($params, 'button-color');
    $button-text-param: map-get($params, 'button-text');
    // Form Group custom variables
    $group-title-param: map-get($params, 'form-group-title-text');


    // default background color
    @if (lightness($background) > 50%) {
      $background: adjust-hue(darken(saturate($background, 19%), 2%), 240deg);
    }
    @else {
      $background: adjust-hue(lighten(desaturate($background, 19%), 10%), 240deg);
    }

    // overwrite custom variables
    $background: if($background-param, $background-param, $background);
    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));
    $accent: if($accent-param, $accent-param, $accent);

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

    $colors: mbsc-ios-colors($params);
    $dark-text: map-get($colors, 'dark-text');
    $white-text: map-get($colors, 'white-text');

    $cont-background: lighten($background, 6%);
    $form-selection: '';
    @if (lightness($button) > 50%) {
      $form-selection: lighten(saturate($accent, 15%), 3%);
    }
    @else {
      $form-selection: darken(desaturate($accent, 15%), 3%);
    }
    $background-limited: hsl(hue($background), saturation($background), max(lightness($background), 3%));
    $border-color: '';
    $button-background: '';
    $disabled-background: '';
    $disabled-color: '';
    $form-text: '';
    $icon-color: lighten(saturate($text, 10%), 55%);
    $switch-track: #4cd764;
    $title-color: '';
    $track-background: '';
    $track-border: '';
    @if (lightness($background) > 50%) {
      $border-color: darken($background-limited, 17%);
      $button-background: lighten($background, 10%);
      $disabled-background: darken($background, 10%);
      $disabled-color: darken($background, 20%);
      $form-text: hsl(hue($text), saturation($text), max(lightness($text), 80%));
      $title-color: lighten(saturate($text, 2%), 44%);
      $track-background: darken($background, 7%);
      $track-border: darken($background, 7%);
    }
    @else {
      $border-color: lighten($background, 20%);
      $button-background: lighten($background, 23%);
      $disabled-background: lighten($background, 13%);
      $disabled-color: lighten($background, 23%);
      $form-text: hsl(hue($text), saturation($text), min(lightness($text), 80%));
      $switch-track: $accent;
      $title-color: darken(desaturate($text, 2%), 44%);
      $track-background: #fff;
      $track-border: lighten($background, 17%);
    }

    // overwrite button color variables
    $button-background: if($button-background-param, $button-background-param, $button-background);
    $button-text: if($button-text-param, $button-text-param, if($button-background-param, get-contrast-color($button-background-param), $accent));
    $title-color: if($group-title-param, $group-title-param, $title-color);

    .mbsc-#{$theme} {


      &.mbsc-form {
        background: $background;
        color: $text;
      }

      &.mbsc-form *::-moz-selection,
      &.mbsc-control-w *::-moz-selection,
      &.mbsc-form *::selection,
      &.mbsc-control-w *::selection {
        color: $form-text;
        background: $form-selection;
      }

      .mbsc-input-ic {
        color: $icon-color;
      }

      .mbsc-divider,
      .mbsc-form-group-title {
        border-bottom: 1px solid $border-color;
        color: $title-color;
      }

      .mbsc-divider {
        border-top: 1px solid $border-color;
      }

      /* Backgrounds */
      &.mbsc-form .mbsc-checkbox,
      &.mbsc-form .mbsc-radio,
      &.mbsc-form .mbsc-switch,
      &.mbsc-form .mbsc-segmented,
      &.mbsc-form .mbsc-stepper-cont,
      &.mbsc-input-box.mbsc-checkbox,
      &.mbsc-input-box.mbsc-radio,
      &.mbsc-input-box.mbsc-switch,
      &.mbsc-input-box.mbsc-stepper-cont,
      &.mbsc-input-outline.mbsc-checkbox,
      &.mbsc-input-outline.mbsc-radio,
      &.mbsc-input-outline.mbsc-switch,
      &.mbsc-input-outline.mbsc-stepper-cont {
        background: $cont-background;
      }

      &.mbsc-form .mbsc-input-box.mbsc-segmented,
      &.mbsc-form .mbsc-input-box.mbsc-segmented {
        background: transparent;
      }

      /* Checkbox */
      .mbsc-checkbox-box {
        border: .125em solid $form-selection;
      }

      .mbsc-checkbox-box:after {
        border: .125em solid $form-selection;
        border-top: 0;
        border-right: 0;
      }

      /* Radio */
      .mbsc-radio-box:after {
        border: .125em solid $form-selection;
        border-top: 0;
        border-right: 0;
      }

      &.mbsc-radio input:disabled ~ .mbsc-radio-label {
        color: $disabled-color;
      }

      /* Buttons */
      &.mbsc-btn {
        background: $button-background;
        color: $button-text;
      }

      &.mbsc-btn:not(.mbsc-btn-flat):disabled {
        background: $disabled-background;
        color: $disabled-color;
      }

      &.mbsc-btn.mbsc-btn-flat {
        background: transparent;
        border-color: transparent;
      }

      &.mbsc-btn-flat:disabled {
        background: transparent;
        color: $disabled-color;
      }

      /* Button color presets */
      &.mbsc-btn-primary.mbsc-btn,
      &.mbsc-btn-secondary.mbsc-btn,
      &.mbsc-btn-success.mbsc-btn,
      &.mbsc-btn-danger.mbsc-btn,
      &.mbsc-btn-warning.mbsc-btn,
      &.mbsc-btn-info.mbsc-btn,
      &.mbsc-btn-dark.mbsc-btn {
        color: $white-text;
      }

      &.mbsc-btn-light.mbsc-btn {
        color: $dark-text;
      }

      /* Flat buttons */
      &.mbsc-btn-flat.mbsc-btn {
        background: transparent;
      }

      /* Outline buttons */
      &.mbsc-btn-outline.mbsc-btn {
        background: transparent;
        border: 1px solid $button-text;
        color: $button-text;

        &.mbsc-active {
          background: $button-text;
          color: $button-background;
        }
      }

      &.mbsc-btn.mbsc-btn-outline:disabled {
        color: $disabled-color;
        border-color: $disabled-color;
        background: transparent;
      }

      /* Switch */
      .mbsc-switch-track {
        background: $track-background;
        border: .0625em solid $track-border;
      }

      .mbsc-switch-track:after {
        background: $cont-background;
      }

      .mbsc-switch-handle {
        background: $white-text;
      }

      &.mbsc-switch input:checked + .mbsc-switch-track {
        background: $switch-track;
        border-color: $switch-track;
      }

      /* Segmented & Stepper */
      .mbsc-segmented-content {
        color: $form-selection;
        border: .07142857em solid $form-selection;
        background: $cont-background;
      }

      &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content,
      &.mbsc-segmented .mbsc-segmented-item input:checked + .mbsc-segmented-content {
        background: $form-selection;
        color: $cont-background;
      }

      &.mbsc-segmented .mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
        background: rgba($accent, .3);
        color: $form-selection;
      }

      &.mbsc-segmented input:disabled ~ .mbsc-segmented-item .mbsc-segmented-content,
      &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-disabled .mbsc-segmented-content,
      &.mbsc-segmented .mbsc-segmented-item input:disabled + .mbsc-segmented-content {
        color: $disabled-color;
        border-color: $disabled-color;
      }

      .mbsc-stepper input:disabled {
        color: $disabled-color;
        -webkit-text-fill-color: $disabled-color;
      }

      &.mbsc-segmented input:disabled:checked + .mbsc-segmented-content {
        background: $disabled-background;
      }

      .mbsc-stepper input {
        color: $text;
      }

      &.mbsc-no-touch .mbsc-segmented-item:hover .mbsc-segmented-content {
        background: rgba($accent, .15);
      }
    }
  }
}
