@import '../jnt-variables';
@import '../jnt-hosts';
@import '../jnt-functions';
@import '../jnt-utils';

@mixin jnt-circle-bar($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    height: 200px,
    width: 200px,
    content: (
      color: $jnt-primary-text-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-circle-bar-host)} {
    @if $declare {
      @include reset-default();
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    width: map-get($vars, width);
    height: map-get($vars, height);
  }
  #{$context} #{$wrapper} [data-group][child-of=jnt-circle-bar-host] {
    @include jnt-circle-bar-indicator-group((), '&');
  }
  #{$context} #{$wrapper} [data-content][child-of=jnt-circle-bar-host] {
    @if $declare {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: auto;
      width: 100%;
      height: 100%;
    }
    @if map-has-key($vars, content) {
      $content: map-get($vars, content);
      color: map-get($content, color);
    }
  }
}
@if $jnt-debug {
  @debug 'circle-bar compiled';
}

@mixin jnt-circle-bar-indicator-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-indicator-group-host)} {
    @if $declare {
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      position: absolute;
      @for $i from 1 through 3 {
        @for $j from 0 through 3 - 1 {
          &[data-groups='#{$i}'][data-index='#{$j}'] {
            $size: percentage(1 - ($j / $i) * .5);
            width: $size;
            height: $size;
          }
        }
      }
    }
  }
  #{$context} #{$wrapper} [data-indicator][child-of=jnt-bar-indicator-group-host] {
    @include jnt-circle-bar-indicator((), '&');
  }
}
@if $jnt-debug {
  @debug 'indicator-group compiled';
}

@mixin jnt-circle-bar-indicator($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    fill: transparent
  );
  $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-indicator-host)} {
    @if $declare {
      height: 100%;
      width: 100%;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      position: absolute;
    }
  }
  #{$context} #{$wrapper} svg[child-of=jnt-bar-indicator-host] {
    fill: map-get($vars, fill);
    @if $declare {
      transform: rotate(-90deg);
      border-radius: 50%;
    }
  }
}
@if $jnt-debug {
  @debug 'indicator compiled';
}