@import '../jnt-variables';
@import '../layout/spinner';
@import '../elements/icon';
@import '../jnt-hosts';
@import '../jnt-functions';

@mixin input-size($size, $wrapper) {
  & {
    font-size: map-get($size, font-size);
    min-height: map-get($size, height);
    height: map-get($size, height);
    &[data-features*='multiline'] {
      height: auto;
    }
  }
  #{$wrapper} [data-spinner][child-of=jnt-input-host] {
    @include jnt-spinner((
      size: map-get($size, state-icon)
    ), '&');
  }
  #{$wrapper} [data-warning][child-of=jnt-input-host],
  #{$wrapper} [data-checked][child-of=jnt-input-host],
  #{$wrapper} [data-reset][child-of=jnt-input-host] [data-icon][child-of=jnt-input-host],
  #{$wrapper} [data-view][child-of=jnt-input-host] [data-icon][child-of=jnt-input-host] {
    [data-icon][child-of=jnt-input-host] {
      @include jnt-icon((
        size: map-get($size, state-icon)
      ), '&');
    }
  }
}
@mixin jnt-input($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    width: null,
    border-color: null,
    hover: (
      border-color: null
    ),
    focus: (
      border-color: null,
      shadow: null
    ),
    sizes: (
      small: (
        font-size: 14px,
        height: 32px,
        icon: 24px,
        chevron: 10px,
        state-icon: 24px
      ),
      normal: (
        font-size: 14px,
        height: 40px,
        icon: 24px,
        chevron: 10px,
        state-icon: 24px
      ),
      large: (
        font-size: 14px,
        height: 48px,
        icon: 24px,
        chevron: 10px,
        state-icon: 24px
      )
    ),
    scheme: (
      normal: (
        border-color: $jnt-control-border-color,
        hover: (
          border-color: $jnt-primary-color
        ),
        focus: (
          border-color: $jnt-primary-color,
          shadow: $jnt-outline-shadow-normal $jnt-secondary-dark-color
        ),
        disabled: (
          border-color: $jnt-control-disabled-border-color
        )
      ),
      success: (
        border-color: $jnt-success-color,
        hover: (
          border-color: $jnt-success-color
        ),
        focus: (
          border-color: $jnt-success-color,
          shadow: $jnt-outline-shadow-normal rgba($jnt-success-color, .5)
        )
      ),
      failed: (
        border-color: $jnt-fail-color,
        hover: (
          border-color: $jnt-fail-color
        ),
        focus: (
          border-color: $jnt-fail-color,
          shadow: $jnt-outline-shadow-normal rgba($jnt-fail-color, .5)
        )
      )
    )
  );
  $vars: $passed;
  $declare: false;
  $wrapper: null;
  @if $jnt-ng-deep {
    $wrapper: '::ng-deep';
  }
  @if $passed == () or $strategy == 'merge' {
    $vars: recursive-map-merge($defs, $passed);
    $declare: true;
  }
  #{if($context, $context, $jnt-input-host)} {
    @if $declare {
      display: inline-flex;
      background-color: $jnt-control-background;
      color: $jnt-primary-text-color;
      border-radius: $jnt-corner-small;
      border-width: 1px;
      border-style: solid;
      line-height: 1;
      box-sizing: border-box;
      overflow: hidden;
      transition: border-color .3s;
      &[data-width='fluid'] {
        display: flex;
        flex: 1;
      }
      &:focus {
        outline: 0;
      }
      &[data-with-icon='true'] {
        #{$wrapper} form[child-of=jnt-input-host] [data-content][child-of=jnt-input-host] {
          padding: $jnt-gutter-small;
        }
      }
      &[data-size=#{$jnt-size-small-name}] {
        #{$wrapper} form[child-of=jnt-input-host] [data-content][child-of=jnt-input-host] {
          padding: $jnt-gutter-tiny $jnt-gutter-normal;
        }
      }
    }
    width: map-get($vars, width);
    @if map-has-key($vars, scheme) {
      $schemes: map-get($vars, scheme);
      @each $scheme, $map in $schemes {
        &[data-scheme='#{$scheme}'] {
          border-color: map-get($map, border-color);
          @if map-has-key($map, hover) {
            $hover: map-get($map, hover);
            &:hover {
              border-color: map-get($hover, border-color);
            }
          }
          @if map-has-key($map, focus) {
            $focus: map-get($map, focus);
            &[data-focused='true'] {
              box-shadow: map-get($focus, shadow);
              border-color: map-get($focus, border-color);
              outline: 0;
            }
          }
          @if map-has-key($map, disabled) {
            $disabled: map-get($map, disabled);
            &[data-disabled='true'] {
              border-color: map-get($disabled, border-color);
              background-color: $jnt-control-disabled-background;
              pointer-events: none;
              #{$wrapper} form[child-of=jnt-input-host] input[child-of=jnt-input-host],
              #{$wrapper} form[child-of=jnt-input-host] textarea[child-of=jnt-input-host] {
                color: $jnt-control-disabled-label-color;
                background-color: $jnt-control-disabled-background;
                pointer-events: none;
              }
              #{$wrapper} [data-arrows][child-of=jnt-input-host] {
                button[child-of=jnt-input-host] {
                  cursor: default;
                }
              }
            }
          }
        }
      }
    }
    &[data-scheme] {
      border-color: map-get($vars, border-color);
      @if map-has-key($vars, hover) {
        $hover: map-get($vars, hover);
        &:hover {
          border-color: map-get($hover, border-color);
        }
      }
      @if map-has-key($vars, focus) {
        $focus: map-get($vars, focus);
        &[data-focused='true'] {
          box-shadow: map-get($focus, shadow);
          border-color: map-get($focus, border-color);
          outline: 0;
        }
      }
    }
    @if map-has-key($vars, sizes) {
      $sizes: map-get($vars, sizes);
      @each $size, $map in $sizes {
        &[data-size = '#{$size}'] {
          @include input-size($map, $wrapper);
          #{$wrapper} [data-label-icon][child-of=jnt-input-host] {
            @include jnt-icon((
              size: map-get($map, icon),
            ), '&');
          }
          #{$wrapper} [data-arrows][child-of=jnt-input-host] [data-icon][child-of=jnt-input-host] {
            @include jnt-icon((
              size: map-get($map, chevron)
            ), '&');
          }
        }
      }
    }
    &[data-textAlign='right'] {
      #{$wrapper} input[child-of=jnt-input-host], #{$wrapper} textarea[child-of=jnt-input-host] {
        @if $declare {
          text-align: right;
        }
      }
    }
    &[data-textAlign='left'] {
      #{$wrapper} input[child-of=jnt-input-host], #{$wrapper} textarea[child-of=jnt-input-host] {
        @if $declare {
          text-align: left;
        }
      }
    }
    &[data-state='loading'] {
      &,
      #{$wrapper} form[child-of=jnt-input-host] [data-content] input[child-of=jnt-input-host],
      #{$wrapper} form[child-of=jnt-input-host] [data-content] textarea[child-of=jnt-input-host] {
        @if $declare {
          background-color: $jnt-control-disabled-background;
          color: $jnt-control-disabled-label-color;
          pointer-events: none;
        }
      }
    }
  }
  #{$context} #{$wrapper} [data-label][child-of=jnt-input-host] {
    @if $declare {
      background-color: $jnt-control-field-label-background;
      padding: $jnt-control-field-label-padding;
      display: flex;
      align-items: center;
      color: $jnt-control-field-label-color;
      white-space: nowrap;
    }
  }
  #{$context} #{$wrapper} form[child-of=jnt-input-host] {
    @if $declare {
      display: flex;
      flex: 1;
      position: relative;
      max-width: 100%;
    }
    &:focus {
      @if $declare {
        outline: 0;
      }
    }
    [data-content][child-of=jnt-input-host] {
      @if $declare {
        flex: 1;
        max-width: 100%;
        box-sizing: border-box;
        padding: $jnt-gutter-small $jnt-gutter-normal;
      }
      [data-label-icon][child-of=jnt-input-host] {
        @include jnt-icon((color: $jnt-primary-text-light-color), '&');
      }
      input[child-of=jnt-input-host], textarea[child-of=jnt-input-host] {
        @if $declare {
          color: $jnt-primary-text-color;
          background-color: $jnt-control-background;
          border: 0;
          padding: 0;
          font-family: inherit;
          resize: none;
          position: relative;
          display: inline-block;
          width: 100%;
          min-width: 0;
        }
        &[type='number']::-webkit-outer-spin-button,
        &[type='number']::-webkit-inner-spin-button {
          @if $declare {
            -webkit-appearance: none;
            margin: 0;
          }
        }
        &[type='number'] {
          @if $declare {
            -moz-appearance: textfield;
          }
        }
        &:focus {
          @if $declare {
            outline: 0;
          }
        }
        &:read-only {
          @if $declare {
            pointer-events: none;
          }
        }
      }
      [data-warning][child-of=jnt-input-host] {
        @if $declare {
          [data-icon][child-of=jnt-input-host] {
            @include jnt-icon((color: $jnt-fail-color), '&');
          }
        }
      }
      [data-checked][child-of=jnt-input-host] {
        @if $declare {
          [data-icon][child-of=jnt-input-host] {
            @include jnt-icon((color: $jnt-success-color), '&');
          }
        }
      }
      [data-loading][child-of=jnt-input-host] {
        @if $declare {
          [data-spinner][child-of=jnt-input-host] {
            @include jnt-spinner((color: $jnt-primary-text-light-color), '&');
          }
        }
      }
      [data-view][child-of=jnt-input-host], [data-reset][child-of=jnt-input-host] {
        @if $declare {
          border: 0;
          background-color: transparent;
          color: $jnt-primary-text-light-color;
          cursor: pointer;
          padding: 0;
          line-height: 1;
          display: flex;
        }
        &:focus {
          @if $declare {
            outline: 0;
          }
        }
        [data-icon][child-of=jnt-input-host] {
          @include jnt-icon((color: $jnt-primary-text-light-color), '&');
        }
        &:hover {
          [data-icon][child-of=jnt-input-host] {
            @include jnt-icon((color: $jnt-primary-text-dark-color), '&');
          }
        }
      }
    }
    [data-arrows][child-of=jnt-input-host] {
      @if $declare {
        height: 100%;
        margin-left: $jnt-gutter-small;
      }
      button[child-of=jnt-input-host] {
        @if $declare {
          padding: 0;
          margin: 0;
          min-height: 50%;
          border: 0;
          border-radius: $jnt-corner-small;
          cursor: pointer;
          background-color: transparent;
          color: $jnt-primary-text-light-color;
          display: flex;
          [data-icon][child-of=jnt-input-host] {
            @include jnt-icon((color: $jnt-primary-text-light-color), '&');
          }
          &:focus {
            outline: 0;
          }
          &:hover {
            [data-icon][child-of=jnt-input-host] {
              @include jnt-icon((color: $jnt-primary-text-dark-color), '&');
            }
          }
          &:first-child {
            align-items: flex-start;
          }
          &:last-child {
            align-items: flex-end;
          }
        }
      }
    }
  }
}
@if $jnt-debug {
  @debug 'input compiled';
}