@use '@angular/material' as mat;
@mixin _define-variables($is-dark-theme) {
  --mw-input-background: #{if($is-dark-theme, #0a0a0a, #f5f5f5)};
  --mw-input-hover-background: #{if($is-dark-theme, #0f0f0f, #f0f0f0)};
  --mw-input-disabled-background: #{if($is-dark-theme, #050505, #fafafa)};
  --mw-input-underline: #{if($is-dark-theme, #808080, #949494)};
  --mw-input-readonly-background: #{if($is-dark-theme, #050505, #fafafa)};
}

@mixin _mw-mat-input-field-background(
  $color,
  $text: var(--mw-text),
  $secondary-text: var(--mw-secondary-text)
) {
  .mat-form-field-flex {
    background-color: inherit;
    /* Prefix & Suffix*/
    .mat-form-field-prefix,
    .mat-form-field-suffix {
      background-color: $color;
      & * {
        color: var(--mw-secondary-text);
      }
    }

    /* Value field */
    .mat-form-field-infix {
      background-color: $color;
      input,
      textarea {
        color: $text;
      }
    }
  }
}

@mixin _mw-mat-input-theme-override($theme) {
  $is-dark-theme: map-get($theme, is-dark);
  /* This overides everything who uses matInput directive: input, textarea, select */
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);

  --mw-input-focus-underline: #{mat.get-color-from-palette($accent)};

  @include _define-variables($is-dark-theme);

  .mw-dark-theme {
    @include _define-variables(true);
  }

  .mw-light-theme {
    @include _define-variables(false);
  }

  mat-form-field.mat-form-field-appearance-fill:not(.mw-skip) {
    @include _mw-mat-input-field-background(var(--mw-input-background));

    /* Focus state */
    &.mat-focused:not(.mat-form-field-invalid)
      .mat-form-field-underline
      .mat-form-field-ripple {
      background-color: var(--mw-input-focus-underline);
    }
    &.mat-focused {
      .mat-form-field-flex {
        input,
        textarea {
          color: var(--mw-text);
        }
      }
    }
    /* Hover state */
    &:not(.mat-form-field-disabled)
      .mat-form-field-flex:not(.mw-readonly):hover {
      .mat-form-field-infix,
      .mat-form-field-suffix,
      .mat-form-field-prefix {
        background-color: var(--mw-input-hover-background);
      }
    }
  }
  mat-form-field.mat-form-field-appearance-fill {
    .mat-form-field-flex {
      /* Placeholder */
      .mat-input-element::placeholder {
        color: var(--mw-placeholder-text);
      }

      /* Label */
      .mat-form-field-label-wrapper {
        label {
          color: var(--mw-secondary-text);
          .mat-form-field-required-marker {
            color: mat.get-color-from-palette($accent);
          }
        }
      }
    }

    /* Underline mark */
    .mat-form-field-underline {
      &:before {
        background-color: var(--mw-input-underline);
      }
      .mat-form-field-ripple {
        background-color: var(--mw-input-underline);
        &:hover {
          background-color: var(--mw-input-focus-underline);
        }
      }
    }

    /* States */
    /* Invalid state */
    &.mat-form-field-invalid {
      /* Error icon */
      .mat-form-field-flex {
        input,
        textarea,
        .mat-form-field-suffix > * {
          color: mat.get-color-from-palette($warn);
        }
      }
      .mat-form-field-underline,
      .mat-form-field-underline:before {
        background-color: mat.get-color-from-palette($warn);
      }
      .mat-form-field-label-wrapper {
        .mat-form-field-required-marker {
          color: mat.get-color-from-palette($primary);
        }
      }
      .mat-form-field-ripple {
        background-color: mat.get-color-from-palette($warn);
      }
      mat-error {
        color: mat.get-color-from-palette($warn);
      }
    }

    /* Disabled state*/
    &.mat-form-field-disabled .mat-form-field-wrapper:not(.mw-readonly) {
      @include _mw-mat-input-field-background(
        var(--mw-input-disabled-background),
        var(--mw-disabled-text)
      );

      .mat-hint {
        color: var(--mw-disabled-text);
      }
    }
    /* Hint / Error area */
    .mat-hint {
      color: var(--mw-secondary-text);
    }
  }
}

@mixin mw-mat-input-override($theme) {
  $is-dark-theme: map-get($theme, is-dark);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  $background: map-merge(
    $background,
    (
      mw-input-base: if($is-dark-theme, white, black),
      mw-input-gray-base: black,
      mw-input-gray: inherit,
    )
  );

  $theme: map-merge(
    $theme,
    (
      background: $background,
    )
  );

  $mw-field-height: 20px;
  $mw-field-padding: 6px 8px;
  $mw-font-size: 14px;

  /* Transformations */
  mat-form-field.mat-form-field-appearance-fill:not(.mw-skip) {
    mat-label {
      display: inline-flex;
      pointer-events: auto;
    }
    /* Textarea */
    textarea {
      height: 76px;
    }

    .mat-form-field-wrapper {
      padding-bottom: 20px;
      line-height: 1;
    }
    .mat-form-field-flex {
      padding: 0;
      align-items: unset;
      /* Rounded corners by child types */
      & .mat-form-field-infix:last-child,
      & .mat-form-field-suffix:last-child {
        border-top-right-radius: 2px;
      }
      & .mat-form-field-infix:first-child,
      & .mat-form-field-prefix:first-child {
        border-top-left-radius: 2px;
      }

      /* Middle */
      .mat-form-field-infix {
        display: inline-flex;
        border-top: 1px solid transparent;
        line-height: $mw-field-height;
        min-height: $mw-field-height;
        box-sizing: content-box;
        font-size: $mw-font-size;

        .mw-tooltip {
          cursor: pointer;
          display: inline-block;
          font-family: 'Material Icons';
          font-size: 12px;
          text-align: center;
          line-height: 16px;
          width: auto;
          padding: 0px 2px;
          height: 16px;
        }
        border-top-width: 0px;
        margin-top: 20px;
        padding: $mw-field-padding;

        input,
        textarea {
          @extend .mw-body2;
          margin-top: 0px;
          border-radius: 2px;
          vertical-align: middle;
        }
        .mat-form-field-label-wrapper {
          padding-top: 20px;
          top: -20px;
          height: 32px;
          label {
            top: 10px;
            margin-top: -6px;
            height: 20px;
            @extend .mw-caption;
            /* othervise label is not 100% scale */
            transform: translateY(-4px);
          }
        }
      }
      /* Prefix & Suffix*/
      .mat-form-field-prefix,
      .mat-form-field-suffix {
        display: inline-flex;
        height: 32px;
        margin-top: 20px;
        & * {
          height: 16px;
          width: 16px;
          line-height: 16px;
          font-size: 16px;
          padding: 8px 0px 8px 0px;
        }
        mat-icon {
          display: block;
          text-align: center;
          vertical-align: middle;
        }
      }
      /* Prefix */
      .mat-form-field-prefix {
        padding-left: 8px;
        /* Label position fix when using prefix */
        & ~ .mat-form-field-infix {
          .mat-form-field-label-wrapper {
            left: -24px;
          }
        }
      }
      /* Suffix */
      .mat-form-field-suffix {
        padding-right: 8px;
      }
    }
    /* Underline mark */
    .mat-form-field-underline {
      bottom: 20px;
      transform: none;

      > span {
        height: 1px;
      }
    }
    /* Hint / Error area */
    .mat-form-field-subscript-wrapper {
      top: calc(100% - 20px);
      padding: 0 0;
      margin-top: 4px;
      height: 16px;
      font-size: 12px;
      mat-hint {
        line-height: 16px;
      }
    }
    /* States */
    /* Focus state */
    &.mat-focused {
      .mat-form-field-underline {
        .mat-form-field-ripple {
          height: 2px;
        }
      }
    }

    /* Invalid state */
    &.mat-form-field-invalid {
      .mat-form-field-underline:before {
        height: 2px;
      }
      mat-error {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    /* Disabled state*/
    &.mat-form-field-disabled {
      .mat-form-field-underline {
        visibility: hidden;
      }
    }
    /* ReadOnly state*/
    .mat-form-field-flex.mw-readonly {
      ~ .mat-form-field-underline {
        visibility: hidden;
      }
      .mat-form-field {
        &-infix,
        &-prefix,
        &-suffix {
          background-color: var(--mw-input-readonly-background);
        }
      }
      ::-webkit-input-placeholder {
        color: transparent;
      }

      :-moz-placeholder {
        /* Firefox 18- */
        color: transparent;
      }

      ::-moz-placeholder {
        /* Firefox 19+ */
        color: transparent;
      }

      :-ms-input-placeholder {
        color: transparent;
      }
    }
  }

  /* Colors */
  @include _mw-mat-input-theme-override($theme);
}