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

@mixin jnt-switch($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    corner: 35px,
    padding: 2px,
    background: (
      on: $jnt-primary-color,
      off: $jnt-gray-600-color,
      slider: (
        on: $jnt-white-color,
        off: $jnt-white-color
      ),
      icon: (
        on: $jnt-primary-color,
        off: $jnt-gray-600-color
      )
    ),
    sizes: (
      tiny: (
        width: 38px,
        height: 20px,
        tag: (
          font-size: 8px
        ),
        label: (
          font-size: 10px
        ),
        icon: (
          size: 11px
        )
      ),
      small: (
        width: 45px,
        height: 24px,
        tag: (
          font-size: 10px
        ),
        label: (
          font-size: 12px
        ),
        icon: (
          size: 12px
        )
      ),
      normal: (
        width: 57px,
        height: 28px,
        tag: (
          font-size: 12px
        ),
        label: (
          font-size: 14px
        ),
        icon: (
          size: 16px
        )
      ),
      large: (
        width: 70px,
        height: 36px,
        tag: (
          font-size: 14px
        ),
        label: (
          font-size: 16px
        ),
        icon: (
          size: 18px
        )
      )
    )
  );
  $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-switch-host)} {
    @if $declare {
      display: inline-flex;
      align-items: center;
    }
    @if map-has-key($vars, sizes) {
      $sizes: map-get($vars, sizes);
      @each $size, $map in $sizes {
        &[data-size = '#{$size}'] {
          #{$wrapper} form[child-of=jnt-switch-host] {
            min-width: map-get($map, width);
            width: map-get($map, width);
            [data-switch][child-of=jnt-switch-host] {
              min-width: calc(#{map-get($map, width)} + (#{map-get($map, width)} - (#{map-get($map, height)} - #{map-get($vars, padding)}) - #{$jnt-gutter-tiny} / 2));
              height: map-get($map, height);
              transform: translateX(calc((#{map-get($map, width)} - (#{map-get($map, height)} - #{map-get($vars, padding)}) - #{$jnt-gutter-tiny} / 2) * (-1)));
              [data-on][child-of=jnt-switch-host], [data-off][child-of=jnt-switch-host] {
                width: calc(#{map-get($map, width)} - #{map-get($vars, padding)} -
                (#{map-get($map, height)} - #{map-get($vars, padding)} * 2) -
                #{map-get($vars, padding)} * 2);
              }
              [data-slider][child-of=jnt-switch-host] {
                width: calc(#{map-get($map, height)} - #{map-get($vars, padding)} * 2);
                height: calc(#{map-get($map, height)} - #{map-get($vars, padding)} * 2);
                [data-icon][child-of=jnt-switch-host] {
                  @if map-has-key($map, icon) {
                    $icon: map-get($map, icon);
                    @include jnt-icon((
                      size: map-get($icon, size)
                    ), '&');
                  }
                }
              }
              @if map-has-key($map, tag) {
                $label: map-get($map, tag);
                span[child-of=jnt-switch-host] {
                  font-size: map-get($label, font-size);
                }
              }
            }
            input[child-of=jnt-switch-host]:checked + [data-switch][child-of=jnt-switch-host] {
              transform: translateX(0);
            }
          }
          @if map-has-key($map, label) {
            $label: map-get($map, label);
            #{$wrapper} label[child-of=jnt-switch-host] {
              font-size: map-get($label, font-size);
            }
          }
        }
      }
    }
  }
  #{$context} #{$wrapper} form[child-of=jnt-switch-host] {
    @if $declare {
      display: inline-flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      //for Safari
      -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
    }
    border-radius: map-get($vars, corner);
    input[child-of=jnt-switch-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, background) {
            $background: map-get($vars, background);
            background-color: map-get($background, on);
            [data-slider][child-of=jnt-switch-host] {
              @if map-has-key($background, slider) {
                $slider: map-get($background, slider);
                background-color: map-get($slider, on);
              }
              [data-icon][child-of=jnt-switch-host] {
                @if map-has-key($background, icon) {
                  $icon-bg: map-get($background, icon);
                  @include jnt-icon((
                    color: map-get($icon-bg, on)
                  ), '&');
                }
              }
            }
          }
        }
      }
      &:disabled {
        @if $declare {
          cursor: default;
          & + [data-switch] {
            opacity: .5;
          }
          &:checked {
            & + [data-switch] {
              opacity: .5;
            }
          }
        }
      }
    }
    [data-switch][child-of=jnt-switch-host] {
      @if $declare {
        display: flex;
      }
      @if map-has-key($vars, background) {
        $background: map-get($vars, background);
        background-color: map-get($background, off);
        [data-on][child-of=jnt-switch-host] {
          @if $declare {
            box-sizing: border-box;
            text-align: right;
          }
          padding-left: calc(#{map-get($vars, padding)} * 2);
        }
        [data-off][child-of=jnt-switch-host] {
          @if $declare {
            box-sizing: border-box;
            text-align: left;
          }
          padding-right: calc(#{map-get($vars, padding)} * 2);
        }
        [data-slider][child-of=jnt-switch-host] {
          @if map-has-key($background, slider) {
            $slider: map-get($background, slider);
            background-color: map-get($slider, off);
          }
          [data-icon][child-of=jnt-switch-host] {
            @if map-has-key($background, icon) {
              $icon-bg: map-get($background, icon);
              @include jnt-icon((
                color: map-get($icon-bg, off)
              ), '&');
            }
          }
        }
      }
      @if $declare {
        transition: transform .4s ease-out, background-color .4s;
      }
      [data-slider][child-of=jnt-switch-host] {
        @if $declare {
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      span[child-of=jnt-switch-host] {
        @if $declare {
          color: $jnt-white-color;
        }
      }
    }
  }
  #{$context} #{$wrapper} label[child-of=jnt-switch-host] {
    @if $declare {
      margin-left: $jnt-gutter-small;
    }
  }
}
@if $jnt-debug {
  @debug 'switch compiled';
}