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

@mixin select-size($size, $wrapper) {
  #{$wrapper} [data-select][child-of=jnt-select-host] {
    font-size: map-get($size, font-size);
    min-height: map-get($size, height);
    padding: map-get($size, padding);
    [data-spinner][child-of=jnt-select-host] {
      @include jnt-spinner((
        size: map-get($size, state-icon)
      ), '&');
    }
    > [data-icon][child-of=jnt-select-host] {
      @include jnt-icon((size: map-get($size, state-icon)), '&');
    }
  }
}
@mixin jnt-select($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    icon: (
      color: $jnt-primary-text-color
    ),
    chips: (
      width: 'default'
    ),
    sizes: (
      small: (
        padding: 2px $jnt-gutter-small,
        font-size: 14px,
        height: 32px,
        chips: (
          padding: 1px $jnt-gutter-tiny 1px $jnt-gutter-small
        ),
        input: (
          padding: 0 0 0 $jnt-gutter-small
        ),
        state-icon: 24px
      ),
      normal: (
        padding: $jnt-gutter-tiny $jnt-gutter-small,
        font-size: 14px,
        height: 40px,
        chips: (
          padding: 3px $jnt-gutter-tiny 3px $jnt-gutter-small
        ),
        input: (
          padding: 3px 0 3px $jnt-gutter-small
        ),
        state-icon: 24px
      ),
      large: (
        padding: $jnt-gutter-tiny $jnt-gutter-small,
        font-size: 14px,
        height: 48px,
        chips: (
          padding: 3px $jnt-gutter-tiny 3px $jnt-gutter-small
        ),
        input: (
          padding: $jnt-gutter-small 0 $jnt-gutter-small $jnt-gutter-small
        ),
        state-icon: 24px
      )
    )
  );
  $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-select-host)} {
    @if $declare {
      display: inline-block;
      position: relative;
      min-width: 70px;
      color: $jnt-primary-text-color;
      line-height: $jnt-line-height-base;
      &[data-width='fluid'] {
        display: block;
        flex: 1;
      }
    }
    @include for-mobile() {
      @if $declare {
        border: 1px solid $jnt-control-border-color;
        border-radius: $jnt-corner-small;
      }
    }
    @if map-has-key($vars, sizes) {
      $sizes: map-get($vars, sizes);
      @each $size, $map in $sizes {
        &[data-size = '#{$size}'] {
          @include select-size($map, $wrapper);
          [data-select][child-of=jnt-select-host] {
            ul[child-of=jnt-select-host] li[child-of=jnt-select-host] {
              input[child-of=jnt-select-host] {
                font-size: map_get($map, font-size);
              }
              @if map-has-key($map, chips) {
                $chips: map-get($map, chips);
                padding: map-get($chips, padding);
              }
              @if map-has-key($map, input) {
                $input: map-get($map, input);
                &[data-query] {
                  padding: map-get($input, padding);
                }
              }
            }
          }
        }
      }
    }
    &[data-opened='true'] {
      @include for-mobile() {
        @if $declare {
          box-shadow: $jnt-outline-shadow-normal $jnt-secondary-dark-color;
        }
      }
      [data-select][child-of=jnt-select-host] {
        @if $declare {
          box-shadow: $jnt-outline-shadow-normal $jnt-secondary-dark-color;
          border-color: $jnt-primary-color;
          @include for-mobile() {
            box-shadow: none;
            border-color: transparent;
            border-radius: calc(#{$jnt-corner-small - 1px}) calc(#{$jnt-corner-small - 1px}) 0 0;
          }
        }
      }
    }
    &[data-mode='single'] {
      [data-select][child-of=jnt-select-host] ul[child-of=jnt-select-host],
      [data-select][child-of=jnt-select-host] ul[child-of=jnt-select-host] li[child-of=jnt-select-host] {
        margin-right: 0;
      }
      [data-select][child-of=jnt-select-host] ul[child-of=jnt-select-host] {
        li[child-of=jnt-select-host] {
          @if $declare {
            background-color: $jnt-primary-background;
            margin-left: -$jnt-gutter-tiny;
          }
        }
      }
      &[data-opened='true'][data-features*='search'] [data-select] {
        ul[child-of=jnt-select-host] {
          li[child-of=jnt-select-host] {
            @if $declare {
              display: none;
              &[data-query] {
                display: flex;
              }
            }
          }
        }
      }
      &[data-empty='false'] {
        [data-select][child-of=jnt-select-host] ul[child-of=jnt-select-host] {
          @if $declare {
            flex: 1;
            li[child-of=jnt-select-host] {
              width: 100%;
            }
          }
        }
        [data-query][child-of=jnt-select-host] {
          @if $declare {
            display: none;
          }
        }
      }
      &[data-empty='true'] {
        [data-select][child-of=jnt-select-host] ul[child-of=jnt-select-host] li[child-of=jnt-select-host][data-query][child-of=jnt-select-host] {
          @if $declare {
            padding-right: $jnt-gutter-small;
          }
        }
      }
      &[data-features*='allowEmpty'] {
        [data-select][child-of=jnt-select-host] ul[child-of=jnt-select-host] li[child-of=jnt-select-host] {
          button[child-of=jnt-select-host][data-close][child-of=jnt-select-host] {
            @if $declare {
              display: flex;
            }
          }
        }
      }
      &:not([data-features*='allowEmpty']) {
        [data-select][child-of=jnt-select-host] ul[child-of=jnt-select-host] li[child-of=jnt-select-host] {
          @if $declare {
            padding-right: 0;
          }
        }
      }
      &[data-features*='search'] {
        [data-select][child-of=jnt-select-host] ul[child-of=jnt-select-host] li[child-of=jnt-select-host] {
          @if $declare {
            margin-right: 0;
          }
        }
      }
    }
    &[data-mode='multiple'] {
      &[data-empty='false']:not([data-features*='search']) {
        [data-query][child-of=jnt-select-host] {
          @if $declare {
            display: none;
          }
        }
      }
      [data-select][child-of=jnt-select-host] ul[child-of=jnt-select-host] li[child-of=jnt-select-host] {
        button[child-of=jnt-select-host][data-close][child-of=jnt-select-host] {
          @if $declare {
            display: flex;
          }
        }
      }
    }
    &[data-disabled='true'] {
      [data-select][child-of=jnt-select-host] {
        @if $declare {
          background-color: $jnt-control-disabled-background;
          border-color: $jnt-control-disabled-border-color;
          pointer-events: none;
        }
        ul[child-of=jnt-select-host] li[child-of=jnt-select-host] {
          @if $declare {
            background-color: $jnt-control-disabled-background;
            color: $jnt-control-disabled-border-color;
            opacity: .8;
          }
          &[data-query] {
            @if $declare {
              background-color: transparent;
            }
          }
        }
        [data-close][child-of=jnt-select-host], [data-toggle][child-of=jnt-select-host] {
          [data-icon][child-of=jnt-select-host] {
            @if $declare {
              @include jnt-icon((color: $jnt-control-disabled-border-color), '&');
            }
          }
        }
      }
      &[data-mode='multiple'][data-empty='false'] {
        [data-select][child-of=jnt-select-host] ul[child-of=jnt-select-host] li[child-of=jnt-select-host] {
          @if $declare {
            background-color: $jnt-muted-color;
          }
        }
      }
    }
    &[data-empty='false'] {
      &[data-opened='false'] {
        [data-query][child-of=jnt-select-host] {
          @if $declare {
            display: none;
          }
        }
      }
    }
    &:not([data-features*='search']) {
      [data-select][child-of=jnt-select-host] ul[child-of=jnt-select-host] li[child-of=jnt-select-host] {
        @if $declare {
          cursor: default;
        }
      }
    }
    &[data-empty='true'], &[data-mode='single'] {
      [data-select][child-of=jnt-select-host] ul[child-of=jnt-select-host] li[child-of=jnt-select-host][data-query][child-of=jnt-select-host] {
        @if $declare {
          flex: 1;
          input[child-of=jnt-select-host] {
            width: 100%;
          }
        }
      }
    }
  }
  #{$context} #{$wrapper} [data-select][child-of=jnt-select-host] {
    @if $declare {
      border: 1px solid $jnt-control-border-color;
      border-radius: $jnt-corner-small;
      background-color: $jnt-control-background;
      box-sizing: border-box;
      position: relative;
      @include for-mobile() {
        border-color: transparent;
        border-radius: calc(#{$jnt-corner-small} - 1px);
      }
    }
    > [data-icon][child-of=jnt-select-host] {
      @if map-has-key($vars, icon) {
        $icon: map-get($vars, icon);
        @include jnt-icon((
          color: map-get($icon, color),
        ), '&');
      }
    }
    &:focus {
      @if $declare {
        outline: 0;
      }
    }
    ul[child-of=jnt-select-host] {
      @if $declare {
        flex: 1;
        list-style: none;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 0;
        margin: 0 0 (-$jnt-gutter-tiny);
      }
      @if map-has-key($vars, chips) {
        $chips: map-get($vars, chips);
        @if map-get($chips, width) == 'fluid' {
          flex-direction: column;
          align-items: stretch;
        }
      }
      li[child-of=jnt-select-host] {
        @if $declare {
          display: flex;
          align-items: center;
          position: relative;
          background-color: $jnt-secondary-background;
          border-radius: $jnt-corner-small;
          margin-bottom: $jnt-gutter-tiny;
          &[data-with-template='false'] {
            line-height: 1;
          }
        }
        [data-empty-options][child-of=jnt-select-host] {
          @if $declare {
            width: 50px;
            height: 10px;
            background-color: $jnt-primary-text-light-color;
          }
        }
        [data-close][child-of=jnt-select-host] {
          @if $declare {
            border: 0;
            background-color: transparent;
            padding: 0 0 0 $jnt-gutter-small;
            color: $jnt-primary-text-light-color;
            margin: 0;
            right: 0;
            display: none;
            cursor: pointer;
            font: $jnt-font-weight-base $jnt-font-size-base $jnt-font-family-base;
            line-height: 100%;
            margin-left: auto;
            &:focus {
              outline: 0;
            }
            & > [data-icon] {
              @include jnt-icon((
                color: $jnt-primary-text-light-color,
                size: 24px
              ), '&');
            }
            &:hover {
              & > [data-icon] {
                @include jnt-icon((
                  color: $jnt-primary-text-dark-color,
                ), '&');
              }
            }
          }
        }
        &:not(:last-child) {
          @if $declare {
            margin-right: $jnt-gutter-tiny;
          }
        }
        &[data-query] {
          @if $declare {
            background-color: transparent;
          }
          input[child-of=jnt-select-host] {
            @if $declare {
              width: 20px;
              border: none;
              background-color: transparent;
              color: $jnt-primary-text-color;
              line-height: $jnt-line-height-base;
              font-family: inherit;
              padding: 0;
              margin: 0;
              &::placeholder {
                padding-left: 1px;
              }
              &:focus {
                outline: none;
              }
            }
          }
        }
      }
    }
    > [data-loading][child-of=jnt-select-host] {
      @if $declare {
        line-height: .8;
      }
    }
    [data-toggle][child-of=jnt-select-host] {
      @if $declare {
        border: 0;
        background-color: transparent;
        padding: 0;
        color: $jnt-primary-text-light-color;
        margin: 0;
        align-self: stretch;
        display: flex;
        align-items: center;
        cursor: pointer;
        &:focus {
          outline: 0;
        }
        & > [data-icon] {
          @include jnt-icon((
            color: $jnt-primary-text-light-color,
            size: 24px
          ), '&');
        }
        &:hover {
          & > [data-icon] {
            @include jnt-icon((
              color: $jnt-primary-text-dark-color
            ), '&');
          }
        }
      }
    }
    [data-spinner][child-of=jnt-select-host] {
      @include jnt-spinner((color: $jnt-primary-text-light-color), '&');
    }
  }
  #{$context} #{$wrapper} [data-options][child-of=jnt-select-host] {
    @include for-mobile() {
      @if $declare {
        background-color: $jnt-control-background;
        border-radius: 0 0 calc(#{$jnt-corner-small} - 1px) calc(#{$jnt-corner-small} - 1px);
      }
    }
    &[data-loading='true'] {
      @if $declare {
        min-height: 100px;
        height: auto;
      }
    }
    [data-skeleton][child-of=jnt-select-host] {
      @if $declare {
        padding: $jnt-gutter-small;
      }
    }
    [data-empty-options][child-of=jnt-select-host] {
      @if $declare {
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        [data-icon][child-of=jnt-select-host] {
          @include jnt-icon((color: $jnt-muted-color, size: 50px), '&');
        }
      }
    }
    [data-options-header][child-of=jnt-select-host] {
      @if $declare {
        padding: $jnt-gutter-small $jnt-gutter-small 0 $jnt-gutter-small;
      }
    }
    [data-loading][child-of=jnt-select-host] {
      @if $declare {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba($jnt-primary-background, .5);
        [data-spinner][child-of=jnt-select-host] {
          @include jnt-spinner((color: $jnt-primary-light-color, size: 50px), '&');
        }
      }
    }
    ul[child-of=jnt-select-host] {
      @if $declare {
        list-style: none;
        margin: 0;
        padding: 0;
        max-height: 200px;
        overflow-y: auto;
        &[data-windows='true'] {
          @include jnt-scrollbar();
        }
        li[child-of=jnt-select-host] {
          cursor: pointer;
          padding: $jnt-gutter-small $jnt-gutter-normal;
          border-radius: $jnt-corner-small;
          [data-icon][child-of=jnt-select-host] {
            line-height: 0;
          }
          &[data-selected=true] {
            opacity: 0.75;
          }
          &:hover {
            background-color: $jnt-highlight-background;
          }
        }
      }
    }
  }
}
@if $jnt-debug {
  @debug 'select compiled';
}