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

@mixin checkbox-size($size, $wrapper) {
  #{$wrapper} [data-switch][child-of=jnt-checkbox-host] {
    min-width: map-get($size, indicator);
    width: map-get($size, indicator);
    min-height: map-get($size, indicator);
    height: map-get($size, indicator);
    [data-icon][child-of=jnt-checkbox-host] {
      width: map-get($size, icon);
      height: map-get($size, icon);
    }
  }
  #{$wrapper} form[child-of=jnt-checkbox-host] input[child-of=jnt-checkbox-host] {
    &[custom='true'] {
      width: map-get($size, indicator);
    }
  }
  #{$wrapper} label[child-of=jnt-checkbox-host] {
    font-size: map-get($size, font-size);
  }
}
@mixin jnt-checkbox($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    sizes: (
      tiny: (
        indicator: 12px,
        icon: 6px,
        font-size: 10px
      ),
      small: (
        indicator: 14px,
        icon: 8px,
        font-size: 11px
      ),
      normal: (
        indicator: 18px,
        icon: 10px,
        font-size: 14px
      ),
      large: (
        indicator: 24px,
        icon: 14px,
        font-size: 16px
      )
    ),
    label: (
      color: $jnt-control-switch-label-color
    ),
    switch: (
      background: $jnt-control-background,
      border-color: $jnt-control-border-color,
      active: (
        color: $jnt-primary-color
      )
    )
  );
  $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-checkbox-host)} {
    @if $declare {
      display: block;
    }
    @if map-has-key($vars, sizes) {
      $sizes: map-get($vars, sizes);
      @each $size, $map in $sizes {
        &[data-size = '#{$size}'] {
          @include checkbox-size($map, $wrapper);
        }
      }
    }
  }
  #{$context} #{$wrapper} form[child-of=jnt-checkbox-host] {
    @if $declare {
      display: flex;
      align-items: center;
      position: relative;
    }
  }
  #{$context} #{$wrapper} input[child-of=jnt-checkbox-host] {
    @if $declare {
      position: absolute;
      top: 0;
      z-index: 1;
      cursor: pointer;
      opacity: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: 0;
      width: 100%;
      height: 100%;
    }
    &:checked + [data-switch] {
      @if map-has-key($vars, switch) {
        $switch: map-get($vars, switch);
        @if map-has-key($switch, active) {
          $active: map-get($switch, active);
          border-color: map-get($active, color);
        }
      }
    }
    &:disabled {
      @if $declare {
        cursor: default;
        pointer-events: none;
        & ~ label[child-of=jnt-checkbox-host] {
          color: $jnt-control-disabled-label-color;
        }
        & + [data-switch] {
          background-color: $jnt-control-disabled-background;
          border-color: $jnt-control-disabled-border-color;
          & > [data-icon] {
            background-color: $jnt-control-disabled-indicator-icon-color;
          }
        }
      }
    }
    &:focus {
      & + [data-switch] {
        @if map-has-key($vars, switch) {
          $switch: map-get($vars, switch);
          @if map-has-key($switch, active) {
            $active: map-get($switch, active);
            @if $declare {
              box-shadow: $jnt-outline-shadow-normal $jnt-secondary-dark-color;
            }
          }
        }
      }
    }
    &:hover {
      & + [data-switch] {
        @if map-has-key($vars, switch) {
          $switch: map-get($vars, switch);
          @if map-has-key($switch, active) {
            $active: map-get($switch, active);
            border-color: map-get($active, color);
          }
        }
      }
    }
  }
  #{$context} #{$wrapper} [label][child-of=jnt-checkbox-host] {
    @if $declare {
      padding-left: $jnt-control-gutter;
      user-select: none;
    }
    @if map-has-key($vars, label) {
      $label: map-get($vars, label);
      color: map-get($label, color);
    }
  }
  #{$context} #{$wrapper} [data-switch][child-of=jnt-checkbox-host] {
    @if $declare {
      position: relative;
      border-radius: $jnt-corner-base;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all .3s;
      box-sizing: border-box;
    }
    @if map-has-key($vars, switch) {
      $switch: map-get($vars, switch);
      border: 1px solid map-get($switch, border-color);
      background-color: map-get($switch, background);
      [data-icon][child-of=jnt-checkbox-host] {
        @if map-has-key($switch, active) {
          $active: map-get($switch, active);
          background-color: map-get($active, color);
        }
      }
    }
    [data-icon][child-of=jnt-checkbox-host] {
      @if $declare {
        border-radius: 2px;
      }
    }
  }
}
@if $jnt-debug {
  @debug 'checkbox compiled';
}

@mixin jnt-checkbox-group($passed: (), $context: null, $strategy: 'changes') {
  $defs: ();
  $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-checkbox-group-host)} {
    @if $declare {
      display: block;
    }
  }
}
@if $jnt-debug {
  @debug 'checkbox-group compiled';
}