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

$sizes: (
  tiny: (
    avatar: 24px,
    icon: 10px,
    font: 10px,
    dot: 5px
  ),
  small: (
    avatar: 40px,
    icon: 14px,
    font: 14px,
    dot: 7px
  ),
  normal: (
    avatar: 80px,
    icon: 26px,
    font: 26px,
    dot: 10px
  ),
  large: (
    avatar: 120px,
    icon: 42px,
    font: 42px,
    dot: 12px
  )
);

@mixin avatar-size($size, $wrapper) {
  min-width: map-get($size, avatar);
  width: map-get($size, avatar);
  min-height: map-get($size, avatar);
  height: map-get($size, avatar);
  #{$wrapper} [data-icon][child-of=jnt-avatar-host] {
    @include jnt-icon((size: map-get($size, icon)), '&');
  }
  #{$wrapper} [data-text][child-of=jnt-avatar-host] {
    font-size: map-get($size, font);
  }
  #{$wrapper} [data-dot][child-of=jnt-avatar-host] {
    @include jnt-dot((size: map-get($size, dot)), '&');
  }
}
@mixin shape($shape, $wrapper) {
  &, #{$wrapper} [data-wrapper] {
    border-radius: map-get($shape, border-radius);
  }
}
@mixin jnt-avatar($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    shapes: (
      circle: (
        border-radius: 50%
      ),
      square: (
        border-radius: 0
      )
    ),
    border: null,
    background: $jnt-secondary-background,
    icon: (
      color: $jnt-primary-light-color
    ),
    text: (
      color: $jnt-primary-color,
      font-weight: $jnt-font-weight-bold
    ),
    sizes: $sizes
  );
  $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-avatar-host)} {
    @if $declare {
      display: block;
      position: relative;
      box-sizing: border-box;
    }
    border: map-get($vars, border);
    $sizes: map-get($vars, sizes);
    @each $size, $map in $sizes {
      &[data-size='#{$size}'] {
        @include avatar-size($map, $wrapper);
      }
    }
    @if map-has-key($vars, shapes) {
      @each $shape, $map in map-get($vars, shapes) {
        &[data-shape='#{$shape}'] {
          @include shape($map, $wrapper);
        }
      }
    }
  }
  #{$wrapper} #{$context} [data-wrapper][child-of=jnt-avatar-host] {
    @if $declare {
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 0;
      box-sizing: border-box;
      overflow: hidden;
      min-width: 100%;
      width: 100%;
      min-height: 100%;
      height: 100%;
    }
    background-color: map-get($vars, background);
    [data-text][child-of=jnt-avatar-host] {
      @if map-has-key($vars, text) {
        $text: map-get($vars, text);
        color: map-get($text, color);
        font-weight: map-get($text, font-weight);
      }
    }
    [data-icon][child-of=jnt-avatar-host] {
      @if map-has-key($vars, icon) {
        $icon: map-get($vars, icon);
        @include jnt-icon((color: map-get($icon, color)), '&');
      }
    }
    [data-image][child-of=jnt-avatar-host] {
      @if $declare {
        width: 100%;
        height: 100%;
      }
    }
  }
  #{$wrapper} #{$context} [data-dot][child-of=jnt-avatar-host] {
    @if $declare {
      position: absolute;
      top: -2px;
      right: -2px;
    }
  }
}
@if $jnt-debug {
  @debug 'avatar compiled';
}

@mixin jnt-avatars-list($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    border-width: 2px,
    avatar-count: 6
  );
  $vars: $passed;
  $declare: false;
  @if $passed == () or $strategy == 'merge' {
    $vars: recursive-map-merge($defs, $passed);
    $declare: true;
  }
  #{if($context, $context, $jnt-avatars-list-host)} {
    @if $declare {
      display: flex;
      position: relative;
      box-sizing: border-box;
    }
    @each $size, $map in $sizes {
      &[data-size='#{$size}'] {
        min-height: map-get($map, avatar);
        @for $i from 1 through map-get($vars, avatar-count) {
          &[data-capacity='#{$i}'] {
            min-width: calc(#{map-get($map, avatar)} / 2 * #{$i} + #{map-get($map, avatar)} / 2 + 2px);
          }
        }
      }
    }
  }
  @for $i from 0 through map-get($vars, avatar-count) {
    [data-avatar-index='#{$i}'][child-of=jnt-avatars-list-host] {
      @if $declare {
        position: absolute;
        border: 2px solid $jnt-primary-background;
        cursor: pointer;
        transition: border-color .5s, z-index .5s;
        &:hover {
          border-color: $jnt-purple-light-color;
          z-index: 1;
        }
      }
      @each $size, $map in $sizes {
        &[data-size='#{$size}'] {
          left: calc(#{$i} * (#{map-get($map, avatar)} / 2));
        }
      }
    }
  }
}
@if $jnt-debug {
  @debug 'avatars-list compiled';
}

@mixin jnt-avatars-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-avatars-group-host)} {
    @if $declare {
      display: flex;
      flex-wrap: wrap-reverse;
      overflow: hidden;
      border-radius: 50%;
      position: relative;
    }
    [data-avatar][child-of=jnt-avatars-group-host] {
      @if $declare {
        overflow: hidden;
        border: 1px solid $jnt-white-color;
        box-sizing: border-box;
      }
    }
    @each $size, $map in $sizes {
      &[data-size='#{$size}'] {
        height: map-get($map, avatar);
        width: map-get($map, avatar);
        [data-overflow][child-of=jnt-avatars-group-host] {
          width: calc(#{map-get($map, avatar)} / 2);
          height: calc(#{map-get($map, avatar)} / 2);
          font-size: calc(#{map-get($map, font)} / 2);
          @if $declare {
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            position: absolute;
            z-index: 1;
            bottom: 0;
            right: 0;
            color: $jnt-white-color;
            background-color: rgba(black, .5);
            font-weight: 300;
            border-top: 1px solid $jnt-white-color;
            border-left: 1px solid $jnt-white-color;
          }
        }
        &[data-capacity='4'] {
          [data-avatar][child-of=jnt-avatars-group-host] {
            min-width: calc(#{map-get($map, avatar)} / 2);
            width: calc(#{map-get($map, avatar)} / 2);
            min-height: calc(#{map-get($map, avatar)} / 2);
            height: calc(#{map-get($map, avatar)} / 2);
            @if $declare {
              &:nth-child(3) {
                border-top: none;
                border-left: none;
              }
              &:nth-child(4) {
                border-top: none;
                border-right: none;
              }
              &:nth-child(2) {
                border-bottom: none;
                border-right: none;
              }
              &:nth-child(1) {
                border-bottom: none;
                border-left: none;
              }
            }
          }
        }
        &[data-capacity='3'] {
          @if $declare {
            flex-direction: column;
            flex-wrap: wrap;
          }
          [data-avatar][child-of=jnt-avatars-group-host] {
            min-width: calc(#{map-get($map, avatar)} / 2);
            width: calc(#{map-get($map, avatar)} / 2);
            min-height: calc(#{map-get($map, avatar)} / 2);
            height: calc(#{map-get($map, avatar)} / 2);
            &:nth-child(1) {
              @if $declare {
                border-top: none;
                border-left: none;
              }
            }
            &:nth-child(2) {
              @if $declare {
                border-bottom: none;
                border-left: none;
              }
            }
            &:nth-child(3) {
              width: map-get($map, avatar);
              height: map-get($map, avatar);
              @if $declare {
                border-top: none;
                border-right: none;
                border-bottom: none;
              }
            }
          }
        }
        &[data-capacity='2'] {
          @if $declare {
            flex-direction: column;
          }
          [data-avatar][child-of=jnt-avatars-group-host] {
            width: map-get($map, avatar);
            height: map-get($map, avatar);
            @if $declare {
              transform: translateX(50%);
              &:nth-child(1) {
                border-top: none;
                border-right: none;
                border-bottom: none;
              }
              &:nth-child(2) {
                border-top: none;
                border-left: none;
                border-bottom: none;
              }
            }
          }
        }
        &[data-capacity='1'] {
          [data-avatar][child-of=jnt-avatars-group-host] {
            @if $declare {
              border: none;
            }
          }
        }
      }
    }
  }
}
@if $jnt-debug {
  @debug 'avatars-group compiled';
}