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

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

@mixin jnt-radio-group($passed: (), $context: null, $strategy: 'changes') {
  $defs: ();
  $vars: $passed;
  $declare: false;
  @if $passed == () or $strategy == 'merge' {
    $vars: recursive-map-merge($defs, $passed);
    $declare: true;
  }
  #{if($context, $context, $jnt-radio-group-host)} {
    @if $declare {
      display: block;
    }
  }
}
@if $jnt-debug {
  @debug 'radio-group compiled';
}