/**
 * @license
 * Copyright 2023 Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
@use 'sass:map';
@use '@material/theme/theme' as mdc-theme;
@use '../field/variables' as field-variables;
@use '../field/utils' as field-utils;
@use '../theme';
@use './variables';

// Field
@mixin field-core {
  display: grid;
  grid-template-columns: [leading] min-content [input] 1fr [trailing] min-content [addon-end] min-content [end];
}

@mixin field-height($layout-state, $custom-prop-height) {
  // Default
  @if $layout-state == default or $layout-state == shape-rounded {
    height: auto;
    @include theme.css-custom-property(
      min-height,
      $custom-prop-height,
      46px
    );
  }
  // Roomy
  @else if $layout-state == roomy or $layout-state == shape-rounded-roomy {
    height: auto;
    @include theme.css-custom-property(
      min-height,
      $custom-prop-height,
      map.get(field-variables.$field, height, roomy)
    );
  }
  // Dense
  @else if $layout-state == dense or $layout-state == shape-rounded-dense {
    height: auto;
    @include theme.css-custom-property(
      min-height,
      $custom-prop-height,
      map.get(field-variables.$field, height, dense)
    );
  }
  @include field-utils.error-layout-state(field-height, $layout-state);
}

// Label Input Container {
@mixin label-input-container-core {
  @include _grid-input;
}

// Input Container
@mixin input-container-core {
  flex: 1 1 0.0001px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  box-sizing: border-box;
}

@mixin input-container-padding {
  padding: map.get(variables.$input-container, padding, default);
}

@mixin input-container-padding-top($layout-state, $slot-state) {
  // With Label
  @if $slot-state == label or $slot-state == label-helper-text {
    // Default
    @if $layout-state == default or $layout-state == shape-rounded {
      padding-top: map.get(variables.$input-container, padding, top, default);
    }
    // Roomy
    @else if $layout-state == roomy or $layout-state == shape-rounded-roomy {
      padding-top: map.get(variables.$input-container, padding, top, roomy);
    }
  }
  @include field-utils.error-layout-state(input-container-padding-top, $layout-state);
  @include field-utils.error-y-axis-slot-state(input-container-padding-top, $slot-state);
}

@mixin input-container-padding-left($layout-state, $slot-state) {
  // Check slot state first because leading slot state always overrides the layout state for input-container.
  @if $slot-state == leading or $slot-state == leading-trailing or $slot-state == leading-addon-end {
    // Leading
    padding-left: map.get(variables.$input-container, padding, left, leading);
  }
  @else if $slot-state == default or $slot-state == trailing or $slot-state == addon-end {
    // Shape Rounded
    @if $layout-state == shape-rounded or $layout-state == shape-rounded-roomy or $layout-state == shape-rounded-dense {
      padding-left: map.get(variables.$input-container, padding, left, shape-rounded);
    }
  }
  @include field-utils.error-x-axis-slot-state(input-container-padding-left, $slot-state);
  @include field-utils.error-layout-state(input-container-padding-left, $layout-state);
}

@mixin input-container-padding-bottom($layout-state, $slot-state) {
  // With Label
  @if $slot-state == label or $slot-state == label-helper-text {
    // Default
    @if $layout-state == default or $layout-state == shape-rounded {
      padding-bottom: map.get(variables.$input-container, padding, bottom, default);
    }
    // Roomy
    @else if $layout-state == roomy or $layout-state == shape-rounded-roomy {
      padding-bottom: map.get(variables.$input-container, padding, bottom, roomy);
    }
  }
  @include field-utils.error-layout-state(input-container-padding-bottom, $layout-state);
  @include field-utils.error-y-axis-slot-state(input-container-padding-bottom, $slot-state);
}

@mixin input-container-padding-right($layout-state, $slot-state) {
  // Check slot state first because leading slot state always overrides the layout state for input-container.
  @if $slot-state == trailing or $slot-state == addon-end or $slot-state == leading-trailing or $slot-state == leading-addon-end {
    // Trailing
    padding-right: map.get(variables.$input-container, padding, right, trailing);
  }
  @else if $slot-state == default or $slot-state == leading {
    // Shape Rounded
    @if $layout-state == shape-rounded or $layout-state == shape-rounded-roomy or $layout-state == shape-rounded-dense {
      padding-right: map.get(variables.$input-container, padding, right, shape-rounded);
    }
  }
  @include field-utils.error-x-axis-slot-state(input-container-padding-right, $slot-state);
  @include field-utils.error-layout-state(input-container-padding-right, $layout-state);
}

// Member
@mixin member-core {
  display: block;
}

@mixin member-theme($theme-state) {
  @if $theme-state == disabled {
    // (DerekMoss): TODO: This assumes members are chips. Make more generic?
    @include mdc-theme.property(--mdc-theme-primary, text-disabled-on-light);
    cursor: not-allowed;
    pointer-events: none;
  }
  @include field-utils.error-theme-state(member-theme, $theme-state);
}

@mixin member-padding($layout-state) {
  // Default
  @if $layout-state == default or $layout-state == shape-rounded {
    margin: map.get(variables.$member, padding, default);
  }
  // Roomy
  @else if $layout-state == roomy or $layout-state == shape-rounded-roomy {
    margin: map.get(variables.$member, padding, roomy);
  }
  // Dense
  @else if $layout-state == dense or $layout-state == shape-rounded-dense {
    margin: map.get(variables.$member, padding, dense);
  }
  @include field-utils.error-layout-state(member-padding, $layout-state);
}

@mixin member-height($layout-state) {
  // (DerekMoss): TODO: This assumes members are chips. Make more generic?
  // Members are generated dynamically, so setting dense on the members is not ideal.

  // Default
  @if $layout-state == default or $layout-state == shape-rounded {
    --forge-chip-min-height: #{map.get(variables.$member, min-height, default)};
  }
  // Dense
  @else if $layout-state == dense or $layout-state == shape-rounded-dense {
    --forge-chip-min-height: #{map.get(variables.$member, min-height, dense)};
  }
  // Roomy uses the default chip height
  @include field-utils.error-layout-state(member-height, $layout-state);
}

// Input
@mixin input-core {
  flex: 1 1 0.0001px;
  min-width: map.get(variables.$input, min-width, default);
  display: block;
  align-self: flex-start;
  padding: 0;
}

@mixin input-margin($layout-state) {
  // Default
  @if $layout-state == default or $layout-state == shape-rounded {
    margin: map.get(variables.$input, margin, default);
  }
  // Roomy
  @else if $layout-state == roomy or $layout-state == shape-rounded-roomy {
    margin: map.get(variables.$input, margin, roomy);
  }
  // Dense
  @else if $layout-state == dense or $layout-state == shape-rounded-dense {
    margin: map.get(variables.$input, margin, dense);
  }
  @include field-utils.error-layout-state(input-margin, $layout-state);
}

@mixin input-height($layout-state) {
  // Default
  @if $layout-state == default or $layout-state == shape-rounded {
    height: map.get(variables.$input, height, default);
    line-height: map.get(variables.$input, line-height, default);
  }
  // Roomy
  @else if $layout-state == roomy or $layout-state == shape-rounded-roomy {
    height: map.get(variables.$input, height, roomy);
    line-height: map.get(variables.$input, line-height, roomy);
  }
  // Dense
  @else if $layout-state == dense or $layout-state == shape-rounded-dense {
    height: map.get(variables.$input, height, dense);
    line-height: map.get(variables.$input, line-height, dense);
  }
  @include field-utils.error-layout-state(input-height, $layout-state);
}

// Leading
@mixin leading-core {
  @include _grid-leading;
  align-self: flex-start;
  display: flex;
}

// Trailing
@mixin trailing-core {
  @include _grid-trailing;
  align-self: flex-start;
}

// Addon End
@mixin addon-end-core {
  @include _grid-addon-end;
  align-self: flex-start;
}

// Icon
@mixin icon-margin-y($layout-state) {
  // Default
  @if $layout-state == default or $layout-state == shape-rounded {
    margin-top: map.get(variables.$icon, margin, y, default);
    margin-bottom: map.get(variables.$icon, margin, y, default);
  }
  // Roomy
  @else if $layout-state == roomy or $layout-state == shape-rounded-roomy {
    margin-top: map.get(variables.$icon, margin, y, roomy);
    margin-bottom: map.get(variables.$icon, margin, y, roomy);
  }
  // Dense
  @else if $layout-state == dense or $layout-state == shape-rounded-dense {
    margin-top: map.get(variables.$icon, margin, y, dense);
    margin-bottom: map.get(variables.$icon, margin, y, dense);
  }
  @include field-utils.error-layout-state(icon-margin-y, $layout-state);
}

@mixin icon-padding-y($layout-state) {
  // Dense
  @if $layout-state == dense or $layout-state == shape-rounded-dense {
    padding-top: map.get(variables.$icon, padding, y, dense);
    padding-bottom: map.get(variables.$icon, padding, y, dense);
  }
  @include field-utils.error-layout-state(icon-padding-y, $layout-state);
}

@mixin icon-button-display {
  display: inline-flex !important;
}

// Grid
@mixin _grid-leading {
  grid-column-start: leading;
  grid-column-end: input;
}

@mixin _grid-input {
  grid-column-start: input;
  grid-column-end: trailing;
}

@mixin _grid-trailing {
  grid-column-start: trailing;
  grid-column-end: addon-end;
  display: flex;
  align-items: flex-start;
}

@mixin _grid-addon-end {
  grid-column-start: addon-end;
  grid-column-end: end;
  display: flex;
  align-items: flex-start;
}