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

// Theme specific variables - inherited from global variables

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

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

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


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

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

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

    $colors: mbsc-material-colors($params);
    // stati colors
    $white-text: map-get($colors, 'white-text');
    $dark-text: map-get($colors, 'dark-text');
    $light-text: map-get($colors, 'light-text');
    $error: map-get($colors, 'error');
    $background-contrast: map-get($colors, 'background-contrast');

    // 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 variables
    $form-text: lighten($text, 7%);
    $checkbox: $background;
    $gray-background: '';
    $input-color: '';
    $switch-disabled: '';
    $switch: '';
    $button-background: '';
    $button-text: '';
    @if (lightness($background) > 50%) {
      $checkbox: lighten($background, 7%);
      $gray-background: darken($background, 23%);
      $input-color: lighten($text, 29%);
      $switch-disabled: darken($background, 20%);
      $switch: lighten($background, 5%);
      $button-background: darken($background, 9%);
      $button-text: darken($text, 36%);
    }
    @else {
      $gray-background: lighten($background, 17%);
      $input-color: darken($text, 19%);
      $switch-disabled: lighten($background, 16%);
      $switch: lighten($background, 53%);
      $button-background: lighten($background, 17%);
      $button-text: lighten($text, 24%);
    }

    // Switch
    $switch-track-disabled: $button-background;
    // Segmented
    $segmented-background-disabled: $button-background;
    $segmented-text: $button-text;
    $segmented-active: darken($button-background, 4%);
    // Stepper
    $stepper-background: $button-background;

    // Button specific vars overwritten
    $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), $button-text));
    $button-active: darken($button-background, 4%);

    // Group title
    $group-title: if($group-title-param, $group-title-param, $accent);

    .mbsc-#{$theme} {

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

      &.mbsc-control-w {
        color: $form-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 {
        color: $group-title;
      }

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

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


      .mbsc-checkbox-box:before,
      .mbsc-radio-box:before {
        background: rgba($background-contrast, .1);
      }

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

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

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

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

      /* Button */
      &.mbsc-btn {
        background: $button-background;
        color: $button-text;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .25);
      }

      &.mbsc-no-touch.mbsc-btn:not(:disabled):hover,
      .mbsc-btn.mbsc-active {
        background: $button-active;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
      }


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

      &.mbsc-btn:disabled {
        color: $input-color;
      }

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

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

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

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

      &.mbsc-no-touch.mbsc-btn-flat:not(:disabled):hover,
      .mbsc-btn-flat.mbsc-active {
        box-shadow: none;
      }

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

        &.mbsc-active.mbsc-control {
          background: $form-text;
          color: $background;
          opacity: 1;
        }
      }

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

      &.mbsc-switch .mbsc-switch-handle {
        background: $switch;
        box-shadow: 0 3px 1px -2px rgba($background-contrast, 0.2), 0 1px 5px 0 rgba($background-contrast, 0.12);
      }

      &.mbsc-switch input:checked + .mbsc-switch-track {
        background-color: rgba($accent, .3);
      }

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

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

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

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

      &.mbsc-segmented .mbsc-segmented-item input:checked + .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,
      &.mbsc-segmented .mbsc-segmented-item .mbsc-active .mbsc-segmented-content {
        background: $segmented-active;
        color: $segmented-text;
      }

      &.mbsc-segmented .mbsc-segmented-item input:disabled + .mbsc-segmented-content {
        color: $input-color;
        border-color: $gray-background;
        background: transparent;
      }

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

      .mbsc-stepper .mbsc-segmented-content {
        border-color: $stepper-background;
      }

      .mbsc-stepper-control .mbsc-segmented-content {
        background: $stepper-background;
      }

      &.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.mbsc-disabled .mbsc-segmented-content {
        background: $segmented-background-disabled;
        color: $input-color;
      }

      &.mbsc-segmented .mbsc-segmented-item input:disabled ~ .mbsc-segmented-item .mbsc-stepper-val {
        background: $background;
      }

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

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

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

      /* Segmented color presets */
      &.mbsc-stepper-primary.mbsc-stepper-cont {
        .mbsc-stepper .mbsc-segmented-content {
          color: $background;
        }

        .mbsc-stepper .mbsc-stepper-val {
          background: transparent;
        }
      }

      &.mbsc-stepper-secondary.mbsc-stepper-cont {
        .mbsc-stepper .mbsc-segmented-content {
          color: $background;
        }

        .mbsc-stepper .mbsc-stepper-val {
          background: transparent;
        }
      }

      &.mbsc-stepper-success.mbsc-stepper-cont {
        .mbsc-stepper .mbsc-segmented-content {
          color: $background;
        }

        .mbsc-stepper .mbsc-stepper-val {
          background: transparent;
        }
      }

      &.mbsc-stepper-danger.mbsc-stepper-cont {
        .mbsc-stepper .mbsc-segmented-content {
          color: $background;
        }

        .mbsc-stepper .mbsc-stepper-val {
          background: transparent;
        }
      }

      &.mbsc-stepper-warning.mbsc-stepper-cont {
        .mbsc-stepper .mbsc-segmented-content {
          color: $background;
        }

        .mbsc-stepper .mbsc-stepper-val {
          background: transparent;
        }
      }

      &.mbsc-stepper-info.mbsc-stepper-cont {
        .mbsc-stepper .mbsc-segmented-content {
          color: $background;
        }

        .mbsc-stepper .mbsc-stepper-val {
          background: transparent;
        }
      }
    }
  }
}
