@use 'sass:map';
@use '../base/colors';
@use '../base/typography';
@use '../base/opacity';

@mixin mx-form-field-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $current-theme: colors.$mx-light;

  @if $is-dark {
    $current-theme: colors.$mx-dark;
  }

  .mdc-text-field,
  .mdc-text-field.mdc-text-field--filled {
    &:not(.mdc-text-field--disabled) {
      background-color: map.get($current-theme, surfaceContainerHighest);
    }
    &.mdc-text-field--disabled,
    &:not(.mdc-text-field--disabled):has(input[readonly]),
    &:not(.mdc-text-field--disabled):has(textarea[readonly]) {
      background-color: rgba(map.get($current-theme, onSurface), 0.04);
    }
    &.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover,
    &.mdc-text-field--invalid:not(.mdc-text-field--disabled),
    &.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused {
      .mdc-line-ripple::before,
      .mdc-line-ripple::after {
        border-bottom-color: map.get($current-theme, error);
      }
      label.mdc-floating-label,
      label.mdc-floating-label--float-above {
        color: map.get($current-theme, error);
      }
    }
    &:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
      border-bottom-color: map.get($current-theme, onSurfaceVariant);
    }
  }

  .mat-mdc-text-field-wrapper .mat-mdc-form-field-focus-overlay {
    background-color: map.get($current-theme, onSurface);
  }
  .mat-mdc-form-field-hint {
    color: map.get($current-theme, onSurfaceVariant);
  }
  .mat-mdc-form-field.mat-form-field-disabled,
  .mat-mdc-form-field:has(input[readonly]:not(.mx-file-uploader__hidden-input)),
  .mat-mdc-form-field:has(mat-select[readonly]) {
    .mat-mdc-form-field-hint {
      color: rgba(map.get($current-theme, onSurfaceVariant), opacity.$opacity-38);
    }
  }
  .mat-mdc-form-field-error.mat-mdc-form-field-error {
    color: map.get($current-theme, error);
  }
  .mat-mdc-form-field-icon-prefix,
  .mat-mdc-form-field-icon-suffix {
    .mat-icon {
      color: map.get($current-theme, onSurface);
    }
  }
  .mdc-text-field--disabled {
    .mdc-line-ripple::before {
      border-bottom-color: rgba(map.get($current-theme, onSurface), opacity.$opacity-38);
    }
    .mat-mdc-form-field-icon-prefix,
    .mat-mdc-form-field-icon-suffix {
      .mat-icon {
        color: rgba(map.get($current-theme, onSurface), opacity.$opacity-38);
      }
    }
  }

  /* mx-label */
  .mx-label-info-tooltip {
    .mat-icon {
      color: map.get($current-theme, onSurfaceVariant);
    }
  }
}

.mat-mdc-form-field .mat-mdc-form-field-input-control.mat-mdc-form-field-input-control {
  @extend .gl-body-lg;
}

.mat-mdc-form-field-subscript-wrapper,
.mat-mdc-form-field-bottom-align:before,
.mat-mdc-form-field-error,
.mat-mdc-form-field-hint {
  @extend .gl-body-sm;
}

.mat-mdc-form-field {
  &:not(.mat-focused),
  &:has(input[readonly]),
  &:has(mat-select[readonly]) {
    .mat-mdc-form-field-hint:not(.mat-mdc-form-field-hint-end) {
      display: none;
    }
  }
}

.mat-mdc-form-field-required-marker {
  display: none;
}

/* global style */
.mat-form-field + .mat-form-field {
  margin-top: 8px;
}

.gl-form-field-inline {
  .mat-form-field + .mat-form-field {
    margin-top: 0px;
  }
}

/* mx-label */
.mdc-floating-label,
.mdc-text-field--filled .mdc-floating-label.mdc-floating-label {
  @extend .gl-body-lg;
  display: flex;
  align-items: center;
}

.mx-label-optional {
  padding-right: 2px;
}

.mx-label-info-tooltip {
  display: inline-flex;
  margin-left: 5px;
  vertical-align: sub;
  .mat-icon {
    width: 18px !important;
    height: 18px !important;
  }
}

/* mx-password-input */
.mdc-text-field--no-label .mat-mdc-form-field-infix {
  .mx-password-input__button {
    bottom: -16px;
  }
}
.mdc-text-field:has(mx-validation-rule-list) {
  overflow: visible;
}

/* mx-file-uploader */
.mdc-text-field:has(mx-file-uploader) {
  padding-right: 0;
}
.mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea)
  .mat-mdc-form-field-infix:has(.mx-file-uploader) {
  padding-top: 4px;
  padding-bottom: 4px;
}
.mdc-text-field:not(.mdc-text-field--no-label):has(mx-file-uploader) {
  .mat-mdc-form-field-infix {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .mx-file-uploader__browse-btn,
  .mx-file-uploader__file-name,
  .mx-file-uploader__placeholder {
    position: relative;
    bottom: -8px;
  }
}

/* mx-form-field */
mat-form-field.mx-form-field-dense {
  .mat-mdc-form-field-infix {
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  mat-label {
    display: none;
  }

  .mat-mdc-form-field-icon-prefix > .mat-icon,
  .mat-mdc-form-field-icon-suffix > .mat-icon {
    padding: 6px;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
  }

  button[mat-icon-button],
  button.mat-mdc-icon-button.mat-mdc-button-base.mx-icon-lg {
    width: 32px;
    height: 32px;
    padding: 6px;
    box-sizing: border-box;

    mat-icon {
      width: 20px;
      height: 20px;
    }

    svg {
      height: 100%;
      width: 100%;
    }
  }

  .mat-mdc-icon-button .mat-mdc-button-touch-target,
  button.mat-mdc-icon-button.mat-mdc-button-base.mx-icon-lg .mat-mdc-button-touch-target {
    width: 32px;
    height: 32px;
  }

  /* mx-password-input */
  .mdc-text-field--no-label .mat-mdc-form-field-infix .mx-password-input__button {
    bottom: -4px;
  }

  /* mx-file-uploader */
  mx-file-uploader {
    height: 32px;
  }

  .mx-file-uploader__browse-btn {
    @extend .gl-label-sm;
    height: 24px;
    padding-left: 6px;
    padding-right: 8px;

    .mat-icon {
      width: 16px;
      height: 16px;
      margin-right: 4px;
    }

    .mat-mdc-button-touch-target {
      height: 24px;
    }
  }
}

.mx-table-inline-tooltip {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.mx-table-inline-select {
  .mx-table-inline-tooltip {
    margin-right: 3px;
  }
}
.mx-form-field-dense {
  .mat-mdc-form-field-subscript-wrapper {
    display: none;
  }
}

.mx-table-inline-input {
  display: flex;
  .mx-table-inline-tooltip {
    margin-right: 3px;
  }
  .mat-mdc-input-element {
    margin-right: 16px;
  }
}
.mat-mdc-text-field-wrapper:has(.mx-table-inline-input) {
  padding-right: 12px;
}