@import "../settings.colors";

@import "tools.functions";
@import "tools.mixins";

// Base

@mixin c-form-field {
  @include font-gm-sans;
  @include font-rendering-fix;
  height: rem(44);
  padding: rem(10);
  border: 1px solid;
  border-radius: 0;
  font-size: rem(16);
  letter-spacing: rem(0.5);
}

// Text inputs and select boxes

@mixin c-form-field--text {
  @include c-form-field;
  width: 100%;
}

// Checkboxes and radio buttons

@mixin c-form-field--box {
  @include c-form-field;
}

// State

@mixin c-form-field--disabled {
  // Disabling pointer events suppresses the hover state but doesn't allow us
  // to change the cursor See: https://github.com/twbs/bootstrap/issues/16088
  // pointer-events: none;
  user-select: none;
  cursor: not-allowed;
}

// Colours

@mixin c-form-field-theme--text($theme, $state: null) {
  @include c-form-field-theme($theme, $state, false);
}

@mixin c-form-field-theme--box($theme, $state: null) {
  @include c-form-field-theme($theme, $state, true);
}

@mixin c-form-field-theme($theme, $state: null, $pseudo-states: true) {
  @if ($theme == "white-primary" or $theme == "grey-primary") {
    @if ($state == "error") {
      background-color: c-form-field-map-get($theme, error, bg);
      border-color: c-form-field-map-get($theme, error, border);
      color: c-form-field-map-get($theme, error, text);
    } @else if ($state == "success") {
      background-color: c-form-field-map-get($theme, success, bg);
      border-color: c-form-field-map-get($theme, success, border);
      color: c-form-field-map-get($theme, success, text);
    } @else if ($state == "disabled") {
      @include c-form-field--disabled;
      background-color: c-form-field-map-get($theme, disabled, bg);
      border-color: c-form-field-map-get($theme, disabled, border);
      color: c-form-field-map-get($theme, disabled, text);
    } @else {
      background-color: c-form-field-map-get($theme, default, bg);
      border-color: c-form-field-map-get($theme, default, border);
      color: c-form-field-map-get($theme, default, text);
    }
    // TODO: should we create pseudo-state colours for the "error" and
    // "success" states? If so, should we programatically generate them
    // via SASS functions like lighten() and darken()?
    @if ($pseudo-states == true and $state == null) {
      &:focus {
        background-color: c-form-field-map-get($theme, focus, bg);
        border-color: c-form-field-map-get($theme, focus, border);
        color: c-form-field-map-get($theme, focus, text);
      }
      &:hover {
        background-color: c-form-field-map-get($theme, hover, bg);
        border-color: c-form-field-map-get($theme, hover, border);
        color: c-form-field-map-get($theme, hover, text);
      }
      &:active {
        background-color: c-form-field-map-get($theme, active, bg);
        border-color: c-form-field-map-get($theme, active, border);
        color: c-form-field-map-get($theme, active, text);
      }
    }
  } @else {
    @warn "Invalid theme was passed to c-form-field-theme mixin";
  }
}

// This utility function allows you to grab styling from the $c-form-field-colors SASS list

@function c-form-field-map-get($theme, $state, $property) {
  @return map-get(map-get(map-get($c-form-field-colors, #{$theme}), #{$state}), #{$property});
}

$c-form-field-colors: (
  white-primary: (
    default: (
      bg: $color-white,
      border: $color-stone-800,
      text: $color-grey-660
    ),
    hover: (
      bg: $color-white,
      border: $color-stone-800,
      text: $color-grey-660
    ),
    focus: (
      bg: $color-stone-150,
      border: $color-stone-800,
      text: $color-grey-800
    ),
    active: (
      bg: $color-stone-200,
      border: $color-stone-800,
      text: $color-grey-900
    ),
    error: (
      bg: $color-white,
      border: $color-utility-red-700,
      text: $color-grey-660
    ),
    success: (
      bg: $color-white,
      border: $color-utility-green-700,
      text: $color-grey-660
    ),
    disabled: (
      bg: $color-grey-50,
      border: $color-stone-500,
      text: $color-stone-500
    )
  ),
  grey-primary: (
    default: (
      bg: $color-grey-700,
      border: $color-grey-300,
      text: $color-white
    ),
    hover: (
      bg: $color-grey-700,
      border: $color-grey-300,
      text: $color-white
    ),
    focus: (
      bg: $color-grey-600,
      border: $color-grey-300,
      text: $color-white
    ),
    active: (
      bg: $color-grey-900,
      border: $color-grey-300,
      text: $color-white
    ),
    error: (
      bg: $color-grey-700,
      border: $color-utility-red-200,
      text: $color-white
    ),
    success: (
      bg: $color-grey-700,
      border: $color-utility-green-200,
      text: $color-white
    ),
    disabled: (
      bg: $color-grey-800,
      border: $color-grey-500,
      text: $color-grey-500
    )
  )
);
