/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
@use 'sass:string';
@use '../core/styles/typography';
@use './token-utils' as *;

//
// Grid
//

@mixin block-start {
  grid-template-areas:
    'label'
    'container'
    'support-text';
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
}

@mixin inline-start {
  grid-template-areas:
    'label container'
    '. support-text';
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
}

@mixin inline-end {
  grid-template-areas:
    'container label'
    'support-text .';
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
}

@mixin inset {
  grid-template-areas:
    'container'
    'support-text';
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
}

@mixin no-label {
  grid-template-areas:
    'container'
    'support-text';
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
}

//
// Label position
//

@mixin label-position($position) {
  @if $position == inline-start {
    margin-inline-end: #{token(label-margin-inline)};
    line-height: normal;
  } @else if $position == inline-end {
    margin-inline-start: #{token(label-margin-inline)};
    line-height: normal;
  } @else if $position == block-start {
    margin-block-end: #{token(label-margin-block)};
    line-height: normal;
  } @else if $position == inset {
    @include typography.style(body2);
    @include override('label-color', 'inset-label-color');

    pointer-events: none;
    overflow: hidden;

    grid-area: center;

    padding-inline-start: #{token(main-content-padding-start, custom)};
    padding-inline-end: #{token(main-content-padding-end, custom)};

    white-space: nowrap;
  }
}

//
// Label alignment
//

@mixin label-alignment($alignment, $direction, $baseline-override: false) {
  @if $direction == inline {
    @if $alignment == baseline {
      align-self: center;
      @if $baseline-override {
        padding-block-start: $baseline-override;
      } @else {
        padding-block-start: calc(typography.variable(body2, line-height) - typography.variable(label2, line-height));
      }
    } @else {
      align-self: #{$alignment};
    }
  } @else {
    @if $alignment == baseline {
      justify-self: start;
      @if $baseline-override {
        padding-inline-start: $baseline-override;
      } @else {
        padding-inline-start: #{token(container-padding-inline-start)};;
      }
    } @else {
      justify-self: #{$alignment};
    }
  }
}

//
// Support text
//

@mixin support-text-inset($inset-direction: none) {
  @if $inset-direction == 'both' or $inset-direction == 'start' {
    padding-inline-start: #{token(container-padding-inline-start)};
  }

  @if $inset-direction == 'both' or $inset-direction == 'end' {
    padding-inline-end: #{token(container-padding-inline-start)};
  }
}

//
// Multiline
//

$resize-container-input-offset-base: calc((token('height', custom) - typography.variable(body2, line-height)) / 2);
$resize-container-input-padding-block-end-base: 8px;

@mixin container-multiline {
  display: block;
  block-size: fit-content;
}

@mixin resize-container {
  align-items: start;

  border-radius: inherit;

  min-inline-size: #{token(multiline-min-inline-size)};
  max-inline-size: #{token(multiline-max-inline-size)};
  min-block-size: #{token(multiline-min-block-size)};
  max-block-size: #{token(multiline-max-block-size)};

  overflow: hidden;
  resize: #{token(multiline-resize)};
}

@mixin resize-container-inset-label {
  pointer-events: none;
  inline-size: fit-content;
}

@mixin resize-container-inset-label-slot {
  display: block;
}

@mixin resize-container-inset-label-background {
    @include floating-animation(resize-container-inset-label-background-animation);
    
    position: absolute;
    z-index: -1;
    inset-inline-start: #{token(border-width)};

    transition-duration: #{token(container-animation-duration)};
    transition-property: background;
    transition-timing-function: #{token(container-animation-timing)};
    
    background: #{token(resize-container-inset-label-background, custom)};
    
    inline-size: 100%;
    block-size: typography.variable(body2, line-height);

    filter: blur(2px);

    content: '';
}

@mixin resize-container-slotted-input {
  padding-block-start: $resize-container-input-offset-base;
  padding-block-end: calc($floating-offset + $resize-container-input-padding-block-end-base);
}

@mixin resize-container-slotted-floating-input {
  padding-block-start: calc($floating-offset + ($resize-container-input-offset-base)) !important; // TODO: find a way to remove this !important
  padding-block-end: #{$resize-container-input-padding-block-end-base} !important;
}

@mixin resize-container-child {
  align-items: center;
  block-size: #{token('height', custom)};
}

@mixin resize-container-accessory-slot {
  @include resize-container-child;

  display: flex;
  align-self: start;
}

//
// Container
//

@mixin container-layout {
  display: grid;
  position: relative;

  flex-grow: 1;

  grid-template-areas: 'start center end popover-icon accessory';
  grid-template-columns: auto 1fr auto auto auto;
}

@mixin last-container-element {
  padding-inline-end: #{token('container-padding-inline-end')};
}

@mixin main-content-padding-inline($side, $next-sibling) {
  @if $side == 'start' and $next-sibling == 'start' {
    @include override('main-content-padding-start', token('start-padding-inline-end'), value);
  } @else if $side == 'end' {
    @if $next-sibling == 'end' {
      @include override('main-content-padding-end', token('end-padding-inline-start'), value);
    } @else if $next-sibling == 'popover-icon' {
      @include override('main-content-padding-end', token('popover-icon-padding-inline-start'), value);
    } @else if $next-sibling == 'accessory' {
      @include override('main-content-padding-end', token('accessory-padding-inline-start'), value);
    }
  }
}

//
// Floating label
//

// The floating label and input are offset away from each other by half the larger of the two line
// heights. Additional space is added or subtracted to account for the block size of the container
// -- one pixel for every 8 pixels above or below 56 pixels.
$floating-offset-base: #{calc(max(typography.variable(body2, line-height), typography.variable(label2, line-height)) / 2)};
$floating-offset-adjustment: #{calc((token('height', custom) - 56px) / 8)};
$floating-offset: #{calc($floating-offset-base + $floating-offset-adjustment)};

// Sets a custom property used for the floating animation and final position of the floating label
@mixin floatable-label {
  @include override('floating-label-translation', 0 calc($floating-offset * -1), value);
}

@mixin floating-label {
  @include typography.style(label2);
  translate: #{token(floating-label-translation, custom)};
}

@mixin float-in-label {
  @include floating-animation(float-in-label-animation);
}

@mixin float-out-label {
  @include floating-animation(float-out-label-animation);
}

@mixin floating-input {
  box-sizing: border-box;
}

@mixin float-in-input {
  @include floating-animation(float-in-input-animation);
}

@mixin float-out-input {
  @include floating-animation(float-out-input-animation);
}

@mixin slotted-floating-input {
  // Computes the block start padding for the input element to space it
  // apart from label by the block size of the label content element
  padding-block-start: calc($floating-offset * 2) !important; // TODO: find a way to remove this !important
}

@mixin floating-animation($animation-name) {
  animation-name: #{$animation-name};
  animation-duration: #{token(floating-animation-duration)};
  animation-timing-function: #{token(floating-animation-timing)};
}

//
// Animation keyframes
//

@keyframes float-in-label-animation {
  from {
    translate: 0;
    opacity: 40%;
  }

  to {
    translate: #{token(floating-label-translation, custom)};
    opacity: 100%;
  }
}

@keyframes float-out-label-animation {
  from {
    translate: #{token(floating-label-translation, custom)};
    opacity: 40%;
  }

  to {
    translate: 0;
    opacity: 100%;
  }
}

@keyframes float-in-input-animation {
  from {
    translate: 0;
  }

  to {
    translate: 0 $floating-offset;
  }
}

@keyframes float-out-input-animation {
  from {
    translate: 0 $floating-offset;
  }

  to {
    translate: 0;
  }
}

@keyframes resize-container-inset-label-background-animation {
  from {
    opacity: 0%;
  }

  to {
    opacity: 100%;
  }
}
