@import '../jnt-variables';
@import '../overlays/popover';
@import '../forms/button';
@import '../layout/responsive';
@import '../elements/icon';
@import '../jnt-hosts';
@import '../jnt-utils';
@import '../jnt-functions';

@mixin card-padding($padding, $wrapper) {
  #{$wrapper} [data-main][child-of=jnt-card-host] {
    padding: $padding;
  }
}
@mixin card-fill($scheme, $wrapper) {
  & {
    background-color: map-get($scheme, background-color);
  }
  #{$wrapper} [data-indicator][child-of=jnt-card-host] {
    border-color: map-get($scheme, background-color);
  }
  #{$wrapper} [data-action][child-of=jnt-card-host] {
    @include jnt-button((border: 2px solid map-get($scheme, background-color)), '&');
  }
}
@mixin jnt-card($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    shadow: null,
    corner: $jnt-corner-normal,
    border: 1px solid $jnt-page-background,
    background: $jnt-primary-background,
    title: (
      padding: 0,
      margin: 0 0 $jnt-gutter-normal 0,
      color: $jnt-primary-text-color,
      text-align: left,
      font-weight: $jnt-font-weight-bold,
      font-size: $jnt-font-size-normal
    ),
    header: (
      padding: 0
    ),
    footer: (
      padding: 0
    ),
    picture: (
      padding: 0,
      corner: null,
      border: null
    ),
    indicator: (
      width: $jnt-gutter-small
    ),
    hover: (
      shadow: $jnt-shadow-normal
    ),
    padding: (
      tiny: $jnt-gutter-tiny,
      small: $jnt-gutter-small,
      normal: $jnt-gutter-normal,
      big: $jnt-gutter-big,
      large: $jnt-gutter-large,
      huge: $jnt-gutter-huge
    ),
    overlay: (
      background-color: rgba($jnt-primary-background, 0.75),
      icon: (
        size: 40px
      )
    )
  );
  $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-card-host)} {
    @if $declare {
      @include reset-default();
      display: inline-block;
      position: relative;
      min-height: 40px;
      box-sizing: border-box;
      &[data-height='fluid'] {
        display: flex;
        #{$wrapper} [data-card][child-of=jnt-card-host],
        #{$wrapper} [data-body][child-of=jnt-card-host] {
          flex: 1;
        }
        #{$wrapper} [data-content][child-of=jnt-card-host] {
          display: flex;
          flex-direction: column;
        }
      }
    }
    border-radius: map-get($vars, corner);
    &[data-width='fluid'] {
      @if $declare {
        display: flex;
        flex: 1;
        #{$wrapper} [data-card][child-of=jnt-card-host] {
          flex: 1;
        }
      }
    }
    @if map-has-key($vars, padding) {
      $padding: map-get($vars, padding);
      @each $padding, $map in $padding {
        &[data-padding = '#{$padding}'] {
          @include card-padding($map, $wrapper);
        }
      }
    }
    &[data-features*='clickable'] {
      #{$wrapper} [data-body][child-of=jnt-card-host] {
        @if $declare {
          cursor: pointer;
        }
      }
      &:hover {
        @if map-has-key($vars, hover) {
          $hover: map-get($vars, hover);
          #{$wrapper} [data-card][child-of=jnt-card-host] {
            box-shadow: map-get($hover, shadow);
          }
        }
      }
      #{$wrapper} [data-card][child-of=jnt-card-host]:focus {
        @if $declare {
          outline: 0;
          box-shadow: $jnt-outline-shadow-small $jnt-primary-light-color;
        }
      }
    }
    &[data-features*='adapted'] {
      @include for-mobile() {
        #{$wrapper} [data-image][child-of=jnt-card-host] {
          @if $declare {
            width: 100%;
            height: auto;
          }
        }
      }
    }
    &[data-has-icon='true'] {
      #{$wrapper} [data-main][child-of=jnt-card-host] {
        @if $declare {
          padding-top: $jnt-gutter-big;
        }
      }
    }
    @content;
  }
  #{$context} #{$wrapper} [data-indicator][child-of=jnt-card-host],
  #{$context} #{$wrapper} [data-action][child-of=jnt-card-host] {
    @if $declare {
      position: absolute;
      top: -12px;
      right: 0;
      z-index: 2;
    }
  }
  #{$context} #{$wrapper} [data-indicator][child-of=jnt-card-host] {
    @if $declare {
      width: 32px;
      height: 32px;
      background-color: $jnt-secondary-background;
      border-radius: $jnt-corner-normal;
      display: flex;
      justify-content: center;
      align-items: center;
      @include jnt-icon((
        size: 16px,
        color: $jnt-primary-light-color
      ), '&');
    }
    border: 2px solid map-get($vars, background);
  }
  #{$context} #{$wrapper} [data-action][child-of=jnt-card-host] {
    @include jnt-button((
      without-text-corner: $jnt-corner-normal,
      border: if(map-get($vars, background), 2px solid map-get($vars, background), null),
      schemes: (
        secondary: (
          inverse-color: $jnt-primary-color
        )
      ),
      sizes: (
        small: (
          height: 36px,
          padding-without-text: 0 $jnt-gutter-small,
          icon: (
            size: 16px
          )
        )
      )
    ), '&');
  }
  #{$context} #{$wrapper} [data-card][child-of=jnt-card-host] {
    border-radius: map-get($vars, corner);
    border: map-get($vars, border);
    background-color: map-get($vars, background);
    box-shadow: map-get($vars, shadow);
    @if $declare {
      overflow: hidden;
    }
    [data-line][child-of=jnt-card-host] {
      @if $declare {
        width: $jnt-gutter-small;
      }
    }
    [data-main][child-of=jnt-card-host] {
      @if $declare {
        flex: 1;
      }
      [data-header][child-of=jnt-card-host] {
        @if map-has-key($vars, header) {
          $header: map-get($vars, header);
          padding: map-get($header, padding);
        }
      }
      [data-content][child-of=jnt-card-host] {
        @if $declare {
          flex: 1;
        }
      }
      [data-picture][child-of=jnt-card-host] {
        @if map-has-key($vars, picture) {
          $picture: map-get($vars, picture);
          padding: map-get($picture, padding);
          img[child-of=jnt-card-host] {
            @if $declare {
              display: block;
            }
            border-radius: map-get($picture, corner);
            border: map-get($picture, border);
          }
        }
      }
      [data-title][child-of=jnt-card-host] {
        @if map-has-key($vars, title) {
          $title: map-get($vars, title);
          padding: map-get($title, padding);
          margin: map-get($title, margin);
          [data-text][child-of=jnt-card-host] {
            text-align: map-get($title, text-align);
            font-weight: map-get($title, font-weight);
            color: map-get($title, color);
            font-size: map-get($title, font-size);
          }
        }
      }
      [data-footer][child-of=jnt-card-host] {
        @if map-has-key($vars, footer) {
          $footer: map-get($vars, footer);
          padding: map-get($footer, padding);
        }
      }
    }
  }
  #{$context} #{$wrapper} [data-load][child-of=jnt-card-host],
  #{$context} #{$wrapper} [data-error][child-of=jnt-card-host] {
    @if $declare {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: $jnt-corner-normal;
      z-index: 1;
    }
    @if map-has-key($vars, overlay) {
      $overlay: map-get($vars, overlay);
      background-color: map-get($overlay, background-color);
      @if map-has-key($overlay, icon) {
        $icon: map-get($overlay, icon);
        [data-icon][child-of=jnt-card-host] {
          @include jnt-icon((
            size: map-get($icon, size)
          ), '&');
        }
      }
    }
  }
}
@if $jnt-debug {
  @debug 'card compiled';
}