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

@mixin jnt-image-cropper($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    min-height: 300px,
    min-width: 200px
  );
  $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-image-cropper-host)} {
    @if $declare {
      display: flex;
      flex-direction: column;
      position: relative;
      max-width: 100%;
      max-height: 100%;
      height: 100%;
      width: 100%;
      text-align: start;
    }
    min-width: map-get($vars, min-width);
    min-height: map-get($vars, min-height);
    &[data-shape='circle'] {
      [data-cropper][child-of=jnt-image-cropper-host] {
        @if $declare {
          border-radius: 50%;
        }
      }
    }
    &[data-disabled='true'] {
      @if $declare {
        cursor: default;
        pointer-events: none;
      }
    }
  }
  #{$wrapper} #{$context} label[child-of=jnt-image-cropper-host] {
    @if $declare {
      position: absolute;
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1;
      [data-icon][child-of=jnt-image-cropper-host] {
        @include jnt-icon((size: $jnt-font-size-huge), '&');
      }
    }
  }
  #{$wrapper} #{$context} [data-wrapper][child-of=jnt-image-cropper-host] {
    @if $declare {
      flex: 1;
      position: relative;
      overflow: hidden;
    }
    img[child-of=jnt-image-cropper-host] {
      @if $declare {
        transform-origin: center;
        position: absolute;
        cursor: move;
      }
    }
    [data-cropper][child-of=jnt-image-cropper-host] {
      @if $declare {
        position: absolute;
        display: flex;
        color: #53535C;
        background: transparent;
        pointer-events: none;
        box-shadow: 0 0 0 100vw rgba(62, 64, 66, 0.5);
      }
      @media (orientation: portrait) {
        @if $declare {
          box-shadow: 0 0 0 100vh rgba(62, 64, 66, 0.5);
        }
      }
      &:after {
        @if $declare {
          position: absolute;
          content: '';
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          opacity: .75;
          color: inherit;
          z-index: 1;
        }
      }
    }
  }
  #{$wrapper} #{$context} [data-zoom][child-of=jnt-image-cropper-host] {
    @if $declare {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 20px;
      input[child-of=jnt-image-cropper-host] {
        width: 100%;
      }
      &[data-disabled='true'] {
        background-color: $jnt-control-disabled-background;
        pointer-events: none;
        cursor: default;
      }
    }
  }
}