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

// Theme specific variables - inherited from global variables

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

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

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

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

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

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

    $background: map-get($params, 'background');
    $text: map-get($params, 'text');
    $accent: map-get($params, 'accent');
    // form specific
    $background-param: map-get($params, 'form-background');
    $text-param: map-get($params, 'form-text');
    $accent-param: map-get($params, 'form-accent');
    // form component specific
    $button-text-param: map-get($params, 'button-text');
    $button-background-param: map-get($params, 'button-color');
    $group-title-param: map-get($params, 'form-group-title-text');
    // 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);

    $form-background: '';
    $checkbox-border: '';
    $button-border: '';
    $frame-border: '';
    $input-border: '';
    $input-hover: '';
    $border-color: '';
    $segmented-disabled: '';
    $button-active: '';
    $button-hover: '';
    @if (lightness($background) > 50%) {
      $form-background: lighten($background, 13%);
      $checkbox-border: desaturate(lighten($accent, 52%), 24%);
      $button-border: lighten($text, 33%);
      $frame-border: darken($background, 15%);
      $input-border: darken($background, 35%);
      $input-hover: darken($background, 55%);
      $border-color: darken($background, 19%);
      $segmented-disabled: darken($background, 17%);
      $button-active: darken($background, 45%);
      $button-hover: darken($background, 10%);
    }
    @else {
      $form-background: darken($background, 12%);
      $checkbox-border: saturate(darken($accent, 52%), 24%);
      $button-border: darken($text, 33%);
      $frame-border: lighten($background, 15%);
      $input-border: lighten($background, 35%);
      $input-hover: lighten($background, 55%);
      $border-color: lighten($background, 19%);
      $segmented-disabled: lighten($background, 19%);
      $button-active: lighten($background, 45%);
      $button-hover: lighten($background, 10%);
    }


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

    .mbsc-#{$theme} {

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

      &.mbsc-control-w {
        color: $text;
      }

      &.mbsc-form *::-moz-selection,
      &.mbsc-control-w *::-moz-selection,
      &.mbsc-form *::selection,
      &.mbsc-control-w *::selection {
        color: get-contrast-color($accent);
        background: rgba($accent, .9);
      }

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

      /* Checkbox, radio */
      .mbsc-checkbox-box,
      .mbsc-radio-box {
        border: .125em solid $text;
      }

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

      &.mbsc-checkbox input:checked+.mbsc-checkbox-box {
        background: $accent;
        border-color: $accent;
      }

      &.mbsc-checkbox input.mbsc-active+.mbsc-checkbox-box {
        border-color: $input-hover;
        background: $input-hover;
      }

      /* Radio */
      .mbsc-radio-box:after {
        background: $text;
      }

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

      &.mbsc-radio input.mbsc-active+.mbsc-radio-box {
        border-color: rgba($text, .6);
      }

      &.mbsc-radio input.mbsc-active+.mbsc-radio-box:after {
        background: rgba($text, .6);
      }

      /* Buttons */
      &.mbsc-btn {
        background: $button-background; // $frame-border;
        border: .125em solid $button-background; // .125em solid $frame-border;
        color: $button-text;
      }

      &.mbsc-no-touch.mbsc-btn:not(.mbsc-btn-flat):not(:disabled):hover {
        border-color: $button-border;
      }

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

      &.mbsc-no-touch.mbsc-btn-flat:not(:disabled):hover {
        background: transparent;
        border-color: transparent;
      }

      &.mbsc-btn.mbsc-btn-flat.mbsc-active:not(:disabled) {
        background: rgba($button-background, .25); // rgba($frame-border, .25);
      }

      /* Outline buttons */
      &.mbsc-btn.mbsc-btn-outline {
        background: transparent;
        border: 0.125em solid $input-border;
        color: $input-border;

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

      /* button hover style */
      &.mbsc-no-touch.mbsc-btn.mbsc-btn-outline:not(:disabled):hover {
        border-color: $button-active;
      }

      .mbsc-switch-track {
        border: 2px solid $text;
      }

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

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

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

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

      &.mbsc-form .mbsc-switch input.mbsc-active+.mbsc-switch-track {
        background: $input-hover;
        border-color: $input-hover;

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

      /* Segmented & Stepper */
      .mbsc-segmented-content {
        color: $text;
        background: $frame-border;
      }

      .mbsc-segmented-content.mbsc-stepper-val {
        background: transparent;
        border-top: 2px solid $frame-border;
        border-bottom: 2px solid $frame-border;
      }

      &.mbsc-ltr.mbsc-segmented:not(.mbsc-stepper) .mbsc-segmented-item {
        border-right: 1px solid $border-color;
      }

      &.mbsc-rtl.mbsc-segmented:not(.mbsc-stepper) .mbsc-segmented-item {
        border-left: 1px solid $border-color;
      }

      &.mbsc-segmented:not(.mbsc-stepper) .mbsc-segmented-item:last-child,
      &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-plus,
      &.mbsc-stepper-val-left .mbsc-segmented input+.mbsc-segmented-item,
      &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control {
        border: 0;
      }

      &.mbsc-ltr.mbsc-segmented .mbsc-stepper-control+.mbsc-stepper-control {
        border-left: 1px solid $border-color;
      }

      &.mbsc-rtl.mbsc-segmented .mbsc-stepper-control+.mbsc-stepper-control {
        border-right: 1px solid $border-color;
      }

      &.mbsc-segmented .mbsc-segmented-item input:checked+.mbsc-segmented-content {
        background: $text;
        color: $form-background;
      }

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

      .mbsc-stepper .mbsc-segmented-item.mbsc-active .mbsc-segmented-content {
        background: $button-border;
      }

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

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

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

      .mbsc-stepper .mbsc-active.mbsc-disabled .mbsc-segmented-content {
        background: transparent;
      }

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

      &.mbsc-no-touch .mbsc-segmented-item:hover .mbsc-segmented-content {
        background: $button-hover;
      }
    }
  }
}