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

// Theme specific variables - inherited from global variables

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

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

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

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

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

    @include mbsc-mobiscroll-page($theme, $params);
    @include mbsc-mobiscroll-input($theme, $params);
    @include mbsc-mobiscroll-slider($theme, $params);
    @include mbsc-mobiscroll-rating($theme, $params);
    @include mbsc-mobiscroll-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
    $button-background-param: map-get($params, 'button-color');
    $button-text-param: map-get($params, 'button-text');
    // Form group
    $group-title-param: map-get($params, 'form-group-title-text');

    $colors: mbsc-mobiscroll-colors($params);
    $input-disabled: map-get($colors, 'input-disabled');
    // static colors
    $white-text: map-get($colors, 'white-text');
    $dark-text: map-get($colors, 'dark-text');
    $error: map-get($colors, 'error');

    // 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);

    // derived colors
    $btn-light: '';
    $btn-disabled: '';
    $switch: '';
    $handle: '';
    $checkbox: '';
    $checked: desaturate(lighten($accent, 25%), 6%);
    // Light background
    @if (lightness($background) > 50%) {
      $btn-light: darken($background, 3%);
      $btn-disabled: darken($background, 10%);
      $switch: darken($background, 19%);
      $handle: darken($background, 8%);
      $checkbox: lighten($background, 3%);
    }
    // Dark background
    @else {
      $btn-light: $background;
      $btn-disabled: lighten($background, 8%);
      $switch: lighten($background, 14%);
      $handle: lighten($background, 7%);
      $checkbox: $background;
    }

    $button-background: if($button-background-param, $button-background-param, $accent);
    $button-text: if($button-text-param, $button-text-param, if($button-background-param, get-contrast-color($button-background-param), $btn-light));
    $button-active: darken($button-background, 4%);
    $group-title: if($group-title-param, $group-title-param, $accent);

    .mbsc-#{$theme} {

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

      // when controls are outside of form
      &.mbsc-control-w {
        color: $text;
      }

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

      .mbsc-divider,
      .mbsc-form-group-title {
        background: $background;
        color: $group-title;
      }

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

      /* Form grid */
      .mbsc-checkbox-box {
        background: $accent;
      }

      .mbsc-checkbox-box:after {
        border-bottom: .125em solid $checkbox;
        border-left: .125em solid $checkbox;
      }

      &.mbsc-checkbox input:disabled+.mbsc-checkbox-box {
        background: $input-disabled;
      }

      /* Radio */
      .mbsc-radio-box {
        border: .125em solid $accent;
      }

      .mbsc-radio-box:after {
        background: $accent;
      }

      &.mbsc-radio input:checked+.mbsc-radio-box {
        background: transparent;
      }

      &.mbsc-radio input:disabled+.mbsc-radio-box {
        border-color: $input-disabled;
      }

      &.mbsc-radio input:disabled+.mbsc-radio-box:after {
        background: $input-disabled;
      }

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

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

      &.mbsc-no-touch.mbsc-btn-flat:not(:disabled):not(.mbsc-active):hover {
        background: rgba($background, .1);
      }

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

      &.mbsc-btn-flat.mbsc-btn.mbsc-active {
        background: rgba($button-background, .3)
      }

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

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

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

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

        &.mbsc-btn-primary.mbsc-active,
        &.mbsc-btn-secondary.mbsc-active,
        &.mbsc-btn-success.mbsc-active,
        &.mbsc-btn-danger.mbsc-active,
        &.mbsc-btn-warning.mbsc-active,
        &.mbsc-btn-info.mbsc-active,
        &.mbsc-btn-dark.mbsc-active {
          color: $background;
        }
      }

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

      /* Switch */
      .mbsc-switch-track {
        background: $btn-disabled;
      }

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

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

      &.mbsc-switch input:checked+.mbsc-switch-track .mbsc-switch-handle {
        background: $accent;
      }

      &.mbsc-switch input:disabled+.mbsc-switch-track {
        background: $input-disabled;
      }

      &.mbsc-switch input:disabled+.mbsc-switch-track .mbsc-switch-handle {
        background: $handle;
      }

      /* Stepper and Segmented */
      .mbsc-segmented-content {
        border: .142858em solid $accent;
        color: $accent;
      }

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

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

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

      &.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: $input-disabled;
        border-color: $input-disabled;
      }

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

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

      &.mbsc-stepper .mbsc-active.mbsc-disabled .mbsc-segmented-content {
        background: transparent;
        color: $input-disabled;
      }

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