@import '../jnt-variables';
@import '../forms/button';
@import '../layout/skeleton';
@import '../elements/icon';
@import '../jnt-hosts';
@import '../jnt-functions';
@import '../jnt-utils';

@mixin jnt-switcher($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    corner: $jnt-corner-small,
    min-width: 150px,
    vertical: (
      max-height: null
    ),
    option: (
      height: 38px,
      active: (
        background: $jnt-primary-light-color,
        color: $jnt-white-color
      ),
      align: null
    )
  );
  $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-switcher-host)} {
    @if $declare {
      @include reset-default();
      display: inline-block;
      position: relative;
    }
    min-width: map-get($vars, min-width);
    &[data-width='fluid'] {
      @if $declare {
        display: block;
        flex: 1;
      }
    }
    #{$wrapper} [data-options][child-of=jnt-switcher-host] {
      [data-option][child-of=jnt-switcher-host] {
        @if $declare {
          background-color: $jnt-primary-background;
          color: $jnt-primary-text-color;
          user-select: none;
          cursor: pointer;
          padding: 0 $jnt-gutter-small;
          &[data-selected='false']:hover {
            background-color: $jnt-highlight-background;
          }
          &:focus {
            outline: 0;
          }
          &[data-disabled='true'] {
            color: $jnt-control-disabled-label-color;
            background-color: $jnt-control-disabled-background;
            pointer-events: none;
            &[data-selected='true'] {
              opacity: .65;
            }
          }
          &[data-selected='false']:focus {
            background-color: rgba($jnt-primary-light-color, .3);
          }
          [data-title][child-of=jnt-switcher-host] {
            flex: 1;
            min-width: 0;
            [data-label][child-of=jnt-switcher-host] {
              flex: 0 1 auto;
              line-height: $jnt-line-height-small;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }
        }
      }
    }
    &[data-orientation='vertical'] {
      @if map-has-key($vars, vertical) {
        $vertical: map-get($vars, vertical);
        @if map-get($vertical, max-height) != null {
          #{$wrapper} [data-scroll][child-of=jnt-switcher-host] {
            max-height: map-get($vertical, max-height);
            overflow-y: auto;
            overflow-x: hidden;
            &[data-windows='true'] {
              @include jnt-scrollbar();
            }
          }
        }
      }
    }
    &[data-orientation='horizontal'] {
      #{$wrapper} [data-options][child-of=jnt-switcher-host] {
        [data-option][child-of=jnt-switcher-host] {
          @if $declare {
            flex: 1;
            justify-content: center;
          }
          @if map-has-key($vars, option) {
            $option: map-get($vars, option);
            [data-title][child-of=jnt-switcher-host] {
              justify-content: map-get($option, align);
            }
          }
        }
      }
    }
    &[data-disabled='true'] {
      @if $declare {
        cursor: default;
        pointer-events: none;
        #{$wrapper} [data-options][child-of=jnt-switcher-host] {
          [data-option][child-of=jnt-switcher-host] {
            color: $jnt-control-disabled-label-color;
            background-color: $jnt-control-disabled-background;
            &[data-selected='true'] {
              opacity: .65;
            }
          }
        }
      }
    }
  }
  #{$context} #{$wrapper} [data-switcher][child-of=jnt-switcher-host] {
    @if $declare {
      border: 1px solid $jnt-control-border-color;
      overflow: hidden;
    }
    border-radius: map-get($vars, corner);
    [data-scroll][child-of=jnt-switcher-host] {
      @if $declare {
        margin-right: -1px;
      }
    }
    [data-options][child-of=jnt-switcher-host] {
      @if map-has-key($vars, option) {
        $option: map-get($vars, option);
        [data-option][child-of=jnt-switcher-host] {
          padding: map-get($option, padding);
          min-height: map-get($option, height);
          &[data-custom-option] {
            padding: $jnt-gutter-small;
            min-height: 0;
          }
          &[data-selected='true'] {
            @if map-has-key($option, active) {
              $active: map-get($option, active);
              color: map-get($active, color);
              background-color: map-get($active, background);
            }
            [data-icon][child-of=jnt-switcher-host] {
              @include jnt-icon((color: $jnt-white-color), '&');
            }
          }
          [data-icon][child-of=jnt-switcher-host] {
            @include jnt-icon((color: $jnt-primary-text-color, size: 24px), '&');
          }
        }
        [data-switch][child-of=jnt-switcher-host] {
          @if $declare {
            position: relative;
            background-color: $jnt-control-background;
            border: 1px solid $jnt-primary-light-color;
            box-sizing: border-box;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all .3s;
            min-width: 18px;
            width: 18px;
            min-height: 18px;
            height: 18px;
          }
          @if $declare {
            &[data-single='true'] {
              border-radius: 50%;
              [data-indicator][child-of=jnt-switcher-host] {
                border-radius: 50%;
              }
            }
            &[data-single='false'] {
              border-radius: $jnt-corner-base;
              [data-indicator][child-of=jnt-switcher-host] {
                border-radius: 2px;
              }
            }
            [data-indicator][child-of=jnt-switcher-host] {
              background-color: $jnt-primary-light-color;
              min-width: 10px;
              width: 10px;
              min-height: 10px;
              height: 10px;
            }
          }
        }
      }
    }
  }
  #{$context} #{$wrapper} [data-count][child-of=jnt-switcher-host] {
    @if $declare {
      position: absolute;
      right: 0;
      top: 0;
      transform: translate(-50%, 50%);
    }
  }
  #{$context} #{$wrapper} [data-placeholder][child-of=jnt-switcher-host] {
    @if $declare {
      flex: 1;
    }
    @if map-has-key($vars, option) {
      $option: map-get($vars, option);
      height: map-get($option, height);
    }
    &:nth-child(odd) {
      @if $declare {
        background-color: $jnt-highlight-background;
      }
    }
    &:nth-child(even) {
      @if $declare {
        background-color: darken($jnt-highlight-background, 5%);
      }
    }
    @if map-has-key($vars, horizontal) {
      $horizontal: map-get($vars, horizontal);
      height: map-get($horizontal, height);
    }
  }
  [data-button][child-of=jnt-switcher-host] {
    @if $declare {
      margin-top: $jnt-gutter-tiny;
      @include jnt-button((padding: 0 2px), '&');
    }
  }
}
@if $jnt-debug {
  @debug 'switcher compiled';
}