//
// Copyright 2019 Stijn de Witt. Some rights reserved.
// Licensed under the MIT Open Source license. 
// https://opensource.org/licenses/MIT
// See LICENSE for details.
//
// Based on code copyright 2018 Google Inc. All Rights Reserved.
// Licensed under the Apache License, Version 2.0.
// http://www.apache.org/licenses/LICENSE-2.0
// See LICENSE-MDC for details.
// 
// Unless required by applicable law or agreed to in writing, software
// distributed under these licenses is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the licenses for the specific language governing permissions and
// limitations under these licenses.
// 

@import "../floating-label/mixins";
@import "../line-ripple/mixins";
@import "../notched-outline/mixins";
@import "../theme/mixins";
@import "helper-text/mixins";
@import "icon/mixins";
@import "icon/variables";

@mixin mdc-text-field-box-corner-radius($radius) {
  border-radius: $radius $radius 0 0;
}

@mixin mdc-text-field-textarea-corner-radius($radius) {
  border-radius: $radius;

  .mdc-floating-label {
    // Bottom corners are square to prevent weird edge cases
    // where text would be visible outside of the curve.
    border-radius: $radius $radius 0 0;
  }

  .mdc-text-field__input {
    // The input element is required to have 2 pixels shaved off
    // of the radius of its parent. This prevents an ugly space of
    // background between the two borders in each corner when the
    // textarea is focused. This also means we need to guard against
    // invalid output.
    border-radius: max($radius - 2, 0);
  }
}

@mixin mdc-text-field-ink-color($color) {
  &:not(.mdc-text-field--disabled) {
    @include mdc-text-field-ink-color_($color);
  }
}

@mixin mdc-text-field-box-fill-color($color) {
  &:not(.mdc-text-field--disabled) {
    @include mdc-text-field-box-fill-color_($color);
  }
}

@mixin mdc-text-field-textarea-stroke-color($color) {
  &:not(.mdc-text-field--disabled) {
    @include mdc-text-field-textarea-stroke-color_($color);
  }
}

@mixin mdc-text-field-textarea-fill-color($color) {
  &:not(.mdc-text-field--disabled) {
    @include mdc-text-field-textarea-fill-color_($color);

    // Automatically add label background color the same color as well to ensure
    // the label can be seen if the input scrolls behind the label
    .mdc-floating-label {
      @include mdc-floating-label-fill-color($color);
    }
  }
}

@mixin mdc-text-field-fullwidth-bottom-line-color($color) {
  &:not(.mdc-text-field--disabled) {
    @include mdc-text-field-fullwidth-bottom-line-color_($color);
  }
}

@mixin mdc-text-field-bottom-line-color($color) {
  &:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) {
    @include mdc-text-field-bottom-line-color_($color);
  }
}

@mixin mdc-text-field-hover-bottom-line-color($color) {
  &:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) {
    @include mdc-text-field-hover-bottom-line-color_($color);
  }
}

@mixin mdc-text-field-line-ripple-color($color) {
  &:not(.mdc-text-field--disabled) {
    @include mdc-text-field-line-ripple-color_($color);
  }
}

@mixin mdc-text-field-label-color($color) {
  &:not(.mdc-text-field--disabled) {
    @include mdc-text-field-label-ink-color_($color);
  }
}

@mixin mdc-text-field-outline-color($color) {
  &:not(.mdc-text-field--disabled) {
    @include mdc-text-field-outline-color_($color);
  }
}

@mixin mdc-text-field-hover-outline-color($color) {
  &:not(.mdc-text-field--disabled) {
    @include mdc-text-field-hover-outline-color_($color);
  }
}

@mixin mdc-text-field-focused-outline-color($color) {
  &:not(.mdc-text-field--disabled) {
    @include mdc-text-field-focused-outline-color_($color);
  }
}

// Private mixins

// Baseline

@mixin mdc-text-field-disabled_ {
  @include mdc-text-field-bottom-line-color_($mdc-text-field-disabled-border);
  @include mdc-text-field-ink-color_($mdc-text-field-disabled-ink-color);
  @include mdc-text-field-label-ink-color_($mdc-text-field-disabled-label-color);
  @include mdc-text-field-helper-text-color_($mdc-text-field-disabled-helper-text-color);
  @include mdc-text-field-icon-color_($mdc-text-field-disabled-icon);
  @include mdc-text-field-fullwidth-bottom-line-color_($mdc-text-field-fullwidth-bottom-line-color);

  pointer-events: none;

  .mdc-text-field__input {
    border-bottom: 1px dotted;
  }

  .mdc-floating-label {
    cursor: default;
  }
}

@mixin mdc-text-field-invalid_ {
  @include mdc-text-field-bottom-line-color($mdc-text-field-error);
  @include mdc-text-field-hover-bottom-line-color($mdc-text-field-error);
  @include mdc-text-field-line-ripple-color($mdc-text-field-error);
  @include mdc-text-field-label-color($mdc-text-field-error);
  @include mdc-text-field-helper-text-validation-color($mdc-text-field-error);

  &.mdc-text-field--with-trailing-icon {
    @include mdc-text-field-icon-color($mdc-text-field-error);
  }

  + .mdc-text-field-helper-text--validation-msg {
    opacity: 1;
  }
}

@mixin mdc-text-field-focused_ {
  @include mdc-text-field-label-color($mdc-text-field-focused-label-color);

  @include mdc-required-text-field-label-asterisk_ {
    color: $mdc-text-field-error;
  }

  + .mdc-text-field-helper-text:not(.mdc-text-field-helper-text--validation-msg) {
    opacity: 1;
  }
}

@mixin mdc-text-field-dense_ {
  // NOTE: This is an eyeball'd approximation of what's in the mocks.
  @include mdc-floating-label-float-position(110%, 0%, $mdc-text-field-dense-label-scale);

  margin-top: 12px;
  margin-bottom: 4px;

  .mdc-floating-label {
    font-size: .813rem;
  }
}

@mixin mdc-required-text-field-label-asterisk_() {
  .mdc-text-field__input:required + .mdc-floating-label::after {
    @content;
  }
}

@mixin mdc-text-field-outline-corner-radius_($radius) {
  // NOTE: idle and notched state border radius mixins
  // are broken into 2 different mixins, otherwise
  // we would be overly specific (big no, no). The cause of
  // this is because .mdc-notched-outline and .mdc-notched-outline__idle
  // are siblings. .mdc-notched-outline__idle needs to be a child of
  // .mdc-notched-outline in order to remedy this issue.
  .mdc-notched-outline {
    @include mdc-notched-outline-corner-radius($radius);
  }

  @include mdc-notched-outline-idle-corner-radius($radius);
}

// Outlined

@mixin mdc-text-field-outlined-disabled_ {
  @include mdc-text-field-ink-color_($mdc-text-field-placeholder);
  @include mdc-text-field-outline-color_($mdc-text-field-outlined-disabled-border);

  .mdc-text-field__input {
    border-bottom: none;
  }
}

@mixin mdc-text-field-outlined-invalid_ {
  @include mdc-text-field-outline-color($mdc-text-field-error);
  @include mdc-text-field-hover-outline-color($mdc-text-field-error);
  @include mdc-text-field-focused-outline-color($mdc-text-field-error);
}

@mixin mdc-text-field-outlined-focused_ {
  @include mdc-notched-outline-stroke-width(2px);
}

@mixin mdc-text-field-outlined-dense_ {
  @include mdc-floating-label-float-position($mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
  @include mdc-floating-label-shake-animation(text-field-outlined-dense);

  height: 48px;

  .mdc-text-field__input {
    padding: 12px 12px 7px;
  }

  .mdc-floating-label {
    bottom: 16px;
  }

  .mdc-text-field__icon {
    top: 12px;
  }
}

@mixin mdc-text-field-outlined_ {
  @include mdc-text-field-outline-color($mdc-text-field-outlined-idle-border);
  @include mdc-text-field-hover-outline-color($mdc-text-field-outlined-hover-border);
  @include mdc-text-field-focused-outline-color(primary);
  @include mdc-floating-label-float-position($mdc-text-field-outlined-label-position-y);
  @include mdc-floating-label-shake-animation(text-field-outlined);
  @include mdc-text-field-outline-corner-radius_($mdc-text-field-border-radius);

  height: 56px;
  border: none;

  .mdc-text-field__input {
    display: flex;
    padding: 12px;
    border: none;
    background-color: transparent;
    z-index: 1;
  }

  .mdc-floating-label {
    @include mdc-rtl-reflexive-position(left, 16px);

    position: absolute;
    bottom: 20px;
  }

  .mdc-text-field__icon {
    z-index: 2;
  }
}

@mixin mdc-text-field-outline-color_($color) {
  // NOTE: outlined version of text-field wants the "idle" and
  // "notched" outline to have the same color. This covers two cases:
  // 1) text field renders with NO value in the "idle" state
  // 2) text field renders with a value in the "notched" state
  @include mdc-notched-outline-idle-color($color);
  @include mdc-notched-outline-color($color);
}

@mixin mdc-text-field-hover-outline-color_($color) {
  &:not(.mdc-text-field--focused) {
    .mdc-text-field__input:hover ~,
    .mdc-text-field__icon:hover ~ {
      @include mdc-notched-outline-idle-color($color);

      // tldr; this doesn't break BEM:
      // We need to wrap this mixin with the .mdc-notched-outline
      // selector, because of the sibling selector '~'. The notched
      // outline html structure has .mdc-notched-outline
      // and .mdc-notched-outline__idle as siblings, while
      // .mdc-notched-outline__path is a child of .mdc-notched-outline
      .mdc-notched-outline {
        @include mdc-notched-outline-color($color);
      }
    }
  }
}

@mixin mdc-text-field-focused-outline-color_($color) {
  &.mdc-text-field--focused {
    @include mdc-notched-outline-color($color);
  }
}

// Box

@mixin mdc-text-field-box_ {
  @include mdc-ripple-surface;
  // Text Field Box intentionally omits press ripple, so each state needs to be specified individually
  @include mdc-states-base-color($mdc-text-field-ink-color);
  @include mdc-states-hover-opacity(mdc-states-opacity($mdc-text-field-ink-color, hover));
  @include mdc-states-focus-opacity(
    mdc-states-opacity($mdc-text-field-ink-color, focus),
    $has-nested-focusable-element: true
  );
  @include mdc-ripple-radius-bounded;
  @include mdc-text-field-box-corner-radius($mdc-text-field-border-radius);
  @include mdc-text-field-box-fill-color($mdc-text-field-box-background);
  @include mdc-floating-label-float-position($mdc-text-field-box-label-position-y);
  @include mdc-floating-label-shake-animation(text-field-box);

  display: inline-flex;
  position: relative;
  height: 56px;
  margin-top: 16px;
  overflow: hidden;

  .mdc-text-field__input {
    align-self: flex-end;
    box-sizing: border-box;
    height: 100%;
    padding: 20px 16px 0;
  }

  .mdc-floating-label {
    @include mdc-rtl-reflexive-position(left, 16px);

    position: absolute;
    bottom: 20px;
    width: calc(100% - #{$mdc-text-field-icon-padding});
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    overflow: hidden;
    // Force the label into its own layer to prevent to prevent visible layer promotion adjustments
    // when the ripple is activated behind it.
    will-change: transform;
  }
}

@mixin mdc-text-field-box-disabled_ {
  @include mdc-text-field-box-fill-color_($mdc-text-field-box-disabled-background);
  @include mdc-text-field-bottom-line-color_($mdc-text-field-outlined-disabled-border);
  @include mdc-text-field-label-color($mdc-text-field-disabled-label-color);

  border-bottom: none;
}

@mixin mdc-text-field-box-dense_ {
  @include mdc-floating-label-float-position($mdc-text-field-box-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
  @include mdc-floating-label-shake-animation(text-field-box-dense);

  .mdc-text-field__input {
    padding: 12px 12px 0;
  }
}

// Icons

@mixin mdc-text-field-with-leading-icon_ {
  @include mdc-text-field-icon-horizontal-position_(left, $mdc-text-field-icon-position, $mdc-text-field-icon-padding);
}

@mixin mdc-text-field-dense-with-leading-icon_ {
  @include mdc-text-field-icon-horizontal-position_(left, $mdc-text-field-dense-icon-position, $mdc-text-field-dense-icon-padding);
}

@mixin mdc-text-field-outlined-with-leading-icon_ {
  @include mdc-floating-label-float-position($mdc-text-field-outlined-label-position-y, $mdc-text-field-outlined-with-leading-icon-label-position-x);
  @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon);

  @include mdc-rtl {
    @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-rtl);
  }
}

@mixin mdc-text-field-outlined-dense-with-leading-icon_ {
  @include mdc-floating-label-float-position($mdc-text-field-outlined-dense-label-position-y, $mdc-text-field-outlined-dense-with-leading-icon-label-position-x, $mdc-text-field-dense-label-scale);
  @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-dense);

  @include mdc-rtl {
    @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-dense-rtl);
  }
}

@mixin mdc-text-field-with-trailing-icon_ {
  @include mdc-text-field-icon-horizontal-position_(right, $mdc-text-field-icon-position, $mdc-text-field-icon-padding);
}

@mixin mdc-text-field-dense-with-trailing-icon_ {
  @include mdc-text-field-icon-horizontal-position_(right, $mdc-text-field-dense-icon-position, $mdc-text-field-dense-icon-padding);
}

// Full Width

@mixin mdc-text-field-fullwidth_ {
  width: 100%;

  .mdc-text-field__input {
    resize: vertical;
  }

  &:not(.mdc-text-field--textarea) {
    display: block;
    box-sizing: border-box;
    height: 56px;
    margin: 0;
    border: none;
    border-bottom: 1px solid;
    outline: none;

    .mdc-text-field__input {
      width: 100%;
      height: 100%;
      padding: 0;
      resize: none;
      // Use !important here to override all other border treatments
      border: none !important;
    }
  }
}

@mixin mdc-text-field-fullwidth-invalid_ {
  @include mdc-text-field-fullwidth-bottom-line-color($mdc-text-field-error);
}

// Textarea

@mixin mdc-text-field-textarea-disabled_ {
  @include mdc-text-field-textarea-stroke-color_($mdc-text-field-disabled-border);
  @include mdc-text-field-textarea-fill-color_($mdc-textarea-disabled-background);

  border-style: solid;

  .mdc-text-field__input {
    border: 1px solid transparent;
  }

  .mdc-floating-label {
    @include mdc-floating-label-fill-color($mdc-textarea-disabled-background);
  }
}

@mixin mdc-text-field-textarea-invalid_ {
  @include mdc-text-field-textarea-stroke-color($mdc-text-field-error);
}

@mixin mdc-text-field-textarea_ {
  @include mdc-text-field-textarea-corner-radius($mdc-text-field-border-radius);
  @include mdc-text-field-textarea-stroke-color($mdc-textarea-border);

  // Translate above the top of the input, and compensate for the amount of offset needed
  // to position the label within the bounds of the inset padding.
  @include mdc-floating-label-float-position($mdc-text-field-textarea-label-position-y, 0%, $mdc-text-field-textarea-label-scale);
  @include mdc-floating-label-shake-animation(textarea);

  $padding-inset: 16px;
  $label-offset-y: $padding-inset + 2;
  $label-offset-x: $padding-inset;

  display: flex;
  width: fit-content;
  height: initial;
  transition: none;
  border: 1px solid;
  overflow: hidden;

  .mdc-text-field__input {
    height: auto;
    margin: 0;
    padding: $padding-inset;
    padding-top: $padding-inset * 2;
    border: 1px solid transparent;
  }

  .mdc-floating-label {
    @include mdc-rtl-reflexive-position(left, 1px);
    @include mdc-floating-label-fill-color($mdc-textarea-background);

    top: $label-offset-y;
    bottom: auto;
    margin-top: 2px;
    margin-left: 8px;
    padding: 8px;
    line-height: 1.15;
  }
}

// Customization

@mixin mdc-text-field-ink-color_($color) {
  .mdc-text-field__input {
    @include mdc-theme-prop(color, $color);
  }
}

@mixin mdc-text-field-box-fill-color_($color) {
  @include mdc-theme-prop(background-color, $color);
}

@mixin mdc-text-field-textarea-stroke-color_($color) {
  @include mdc-theme-prop(border-color, $color);

  .mdc-text-field__input:focus {
    @include mdc-theme-prop(border-color, $color);
  }
}

@mixin mdc-text-field-textarea-fill-color_($color) {
  @include mdc-theme-prop(background-color, $color);
}

@mixin mdc-text-field-fullwidth-bottom-line-color_($color) {
  &:not(.mdc-text-field--textarea) {
    @include mdc-theme-prop(border-bottom-color, $color);
  }
}

@mixin mdc-text-field-bottom-line-color_($color) {
  .mdc-text-field__input {
    @include mdc-theme-prop(border-bottom-color, $color);
  }
}

@mixin mdc-text-field-hover-bottom-line-color_($color) {
  .mdc-text-field__input:hover {
    @include mdc-theme-prop(border-bottom-color, $color);
  }
}

@mixin mdc-text-field-line-ripple-color_($color) {
  .mdc-line-ripple {
    @include mdc-line-ripple-color($color);
  }
}

@mixin mdc-text-field-label-ink-color_($color) {
  .mdc-floating-label {
    @include mdc-floating-label-ink-color($color);
  }

  // CSS-only version
  .mdc-text-field__input::placeholder {
    @include mdc-theme-prop(color, $color);
  }
}