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

@mixin jnt-table($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    min-height: 200px,
    min-width: 400px
  );
  $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-table-host)} {
    @if $declare {
      @include reset-default();
      display: block;
      padding: 0 $jnt-gutter-normal $jnt-gutter-normal $jnt-gutter-normal;
    }
    @include min-for-desktop() {
      min-width: map-get($vars, min-width);
    }
    @include jnt-button((
      sizes: (
        schemes: (
          secondary: (
            inverse-color: $jnt-gray-800-color
          )
        ),
        normal: (
          padding: 0 $jnt-gutter-small,
        )
      )
    ), '&');
    @include jnt-card((border: 1px solid $jnt-gray-700-color));
  }
  #{$wrapper} #{$context} [data-feature][child-of=jnt-table-host] {
    background-color: $jnt-highlight-background;
    margin-left: -$jnt-gutter-normal;
    margin-right: -$jnt-gutter-normal;
    padding: $jnt-gutter-small $jnt-gutter-normal;
  }
  #{$wrapper} #{$context} [data-filters][child-of=jnt-table-host] {
    padding: $jnt-gutter-normal 0;
  }
  #{$wrapper} #{$context} [data-table][child-of=jnt-table-host] {
    @if $declare {
      margin-left: -$jnt-gutter-normal;
      margin-right: -$jnt-gutter-normal;
    }
  }
  #{$wrapper} #{$context} [data-search][child-of=jnt-table-host] {
    @include min-for-desktop() {
      @include jnt-input((width: 400px), '&');
    }
  }
  #{$wrapper} #{$context} [data-nodata][child-of=jnt-table-host] {
    @if $declare {
      @include jnt-icon((color: $jnt-muted-color, size: 80px), '&');
    }
  }
  #{$wrapper} #{$context} [data-line][child-of=jnt-table-host] {
    @if $declare {
      tr[child-of=jnt-table-host] {
        td[child-of=jnt-table-host] {
          vertical-align: top;
          padding: $jnt-gutter-normal $jnt-gutter-small;
        }
        &:not(:last-child) {
          td[child-of=jnt-table-host] {
            border-bottom: 1px solid $jnt-muted-color;
          }
        }
        &:first-child {
          td[child-of=jnt-table-host] {
            padding-top: 0;
          }
        }
        &:last-child {
          td[child-of=jnt-table-host] {
            padding-bottom: 0;
          }
        }
      }
    }
  }
  #{$wrapper} #{$context} [data-spinner][child-of=jnt-table-host] {
    @if $declare {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: rgba($jnt-secondary-background, .6);
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all .3s;
      z-index: 1;
    }
    [data-icon][child-of=jnt-table-host] {
      @if $declare {
        color: $jnt-primary-text-light-color;
      }
    }
  }
  #{$wrapper} #{$context} table[child-of=jnt-table-host] {
    @if $declare {
      width: 100%;
      border-collapse: collapse;
      position: relative;
    }
    thead[child-of=jnt-table-host] {
      @if $declare {
        background-color: $jnt-secondary-background;
        th[child-of=jnt-table-host] {
          &[data-actions] {
            width: 50px;
          }
          &[data-sortable=true] {
            cursor: pointer;
          }
        }
      }
    }
    tbody[child-of=jnt-table-host] tr[child-of=jnt-table-host] {
      @if $declare {
        border-bottom: 1px solid $jnt-muted-color;
        background-color: $jnt-primary-background;
        transition: all .3s;
      }
      &[data-nodata] {
        height: map-get($vars, min-height);
        @if $declare {
          pointer-events: none;
          border-bottom: 0;
        }
        td[child-of=jnt-table-host] {
          @if $declare {
            vertical-align: middle;
            text-align: center;
            [data-icon][child-of=jnt-table-host] {
              @include jnt-icon((color: $jnt-muted-color, size: 80px), '&');
            }
          }
        }
      }
      &[data-loading] {
        height: map-get($vars, min-height);
        @if $declare {
          pointer-events: none;
          border-bottom: 0;
        }
      }
      &:hover {
        @if $declare {
          background-color: $jnt-highlight-background;
        }
      }
      td[child-of=jnt-table-host] {
        @if $declare {
          &[data-actions] {
            text-align: center;
            [data-trigger][child-of=jnt-table-host] {
              @include jnt-button((
                sizes: (
                  normal: (
                    padding: 0 $jnt-gutter-normal
                  )
                )
              ), '&');
            }
          }
        }
      }
    }
    th[child-of=jnt-table-host] {
      @if $declare {
        padding: $jnt-gutter-normal;
        box-sizing: border-box;
      }
    }
    td[child-of=jnt-table-host] {
      @if $declare {
        padding: $jnt-gutter-small $jnt-gutter-normal;
        box-sizing: border-box;
      }
    }
  }
  #{$wrapper} #{$context} [data-pagination][child-of=jnt-table-host] {
    @if $declare {
      display: flex;
      justify-content: center;
      align-items: center;
      [data-pages][child-of=jnt-table-host] {
        flex: 1;
      }
    }
  }
}
@if $jnt-debug {
  @debug 'table compiled';
}