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

@mixin jnt-gantt($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    min-height: 200px,
    day: (
      width: null,
      padding: $jnt-gutter-normal $jnt-gutter-tiny,
      current: (
        color: $jnt-white-color,
        background-color: $jnt-primary-color
      ),
      weekend: (
        background-color: $jnt-secondary-dark-color
      )
    ),
    title: (
      width: 20%
    ),
    period: (
      width: 80%
    )
  );
  $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-gantt-host)} {
    @if $declare {
      @include reset-default();
      display: inline-block;
      box-sizing: border-box;
      &[data-width='fluid'] {
        display: block;
        flex: 1;
      }
    }
  }
  #{$wrapper} #{$context} [data-spinner][child-of=jnt-gantt-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-gantt-host] {
      @if $declare {
        color: $jnt-primary-text-light-color;
      }
    }
  }
  #{$context} #{$wrapper} [data-controls][child-of=jnt-gantt-host] {
    @if $declare {
      margin: 10px auto;
      [data-month][child-of=jnt-gantt-host] {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
  #{$context} #{$wrapper} table[child-of=jnt-gantt-host][data-mobile][child-of=jnt-gantt-host] {
    @if $declare {
      tr[child-of=jnt-gantt-host] {
        td[child-of=jnt-gantt-host] {
          text-align: center;
          font-size: $jnt-font-size-small;
          padding: $jnt-gutter-tiny;
          border: 1px solid $jnt-gray-400-color;
          &[data-day] {
            width: 35px;
            border-right: 0;
            @if $declare {
              text-align: center;
              font-size: $jnt-font-size-small;
            }
            @if map-has-key($vars, day) {
              $day: map-get($vars, day);
              &[data-current='true'] {
                @if map-has-key($day, current) {
                  $current: map-get($day, current);
                  color: map-get($current, color);
                  background-color: map-get($current, background-color);
                }
              }
              &[data-weekend='true'] {
                @if map-has-key($day, weekend) {
                  $weekend: map-get($day, weekend);
                  background-color: map-get($weekend, background-color);
                }
              }
            }
          }
        }
        &:not(:last-child) {
          td[child-of=jnt-gantt-host] {
            border-bottom: 0;
          }
        }
      }
    }
  }
  #{$context} #{$wrapper} table[child-of=jnt-gantt-host] {
    @if $declare {
      table-layout: fixed;
      width: 100%;
    }
    thead[child-of=jnt-gantt-host] {
      tr[child-of=jnt-gantt-host] {
        &[data-timeline] {
          @if $declare {
            background-color: $jnt-secondary-background;
          }
        }
        td[child-of=jnt-gantt-host] {
          &[data-controls] {
            @if $declare {
              border-right: none;
              padding: $jnt-gutter-normal $jnt-gutter-tiny;
            }
            @if map-has-key($vars, period) {
              $period: map-get($vars, period);
              width: map-get($period, width);
            }
          }
          &[data-day] {
            @if $declare {
              text-align: center;
              font-size: $jnt-font-size-small;
            }
            @if map-has-key($vars, day) {
              $day: map-get($vars, day);
              padding: map-get($day, padding);
              &[data-current='true'] {
                @if map-has-key($day, current) {
                  $current: map-get($day, current);
                  color: map-get($current, color);
                  background-color: map-get($current, background-color);
                }
              }
              &[data-weekend='true'] {
                @if map-has-key($day, weekend) {
                  $weekend: map-get($day, weekend);
                  background-color: map-get($weekend, background-color);
                }
              }
            }
          }
          &[data-gutter] {
            @if $declare {
              width: 4px;
            }
          }
        }
      }
    }
    tbody[child-of=jnt-gantt-host] {
      [data-current-line][child-of=jnt-gantt-host] {
        display: none;
        position: absolute;
        height: 100%;
        width: $jnt-gutter-tiny;
        background-color: $jnt-red-color;
      }
      tr[child-of=jnt-gantt-host] {
        &[data-nodata] {
          height: map-get($vars, min-height);
          @if $declare {
            pointer-events: none;
            td[child-of=jnt-gantt-host] {
              vertical-align: middle;
              text-align: center;
              [data-icon][child-of=jnt-gantt-host] {
                @include jnt-icon((size: 80px, color: $jnt-muted-color), '&');
              }
            }
          }
        }
        &[data-loading] {
          @if $declare {
            pointer-events: none;
            border-bottom: 0;
            td[child-of=jnt-gantt-host] {
              padding: $jnt-gutter-normal;
            }
          }
        }
      }
      td[child-of=jnt-gantt-host] {
        @if $declare {
          border-bottom: 1px solid $jnt-gray-400-color;
          border-right: 1px solid $jnt-gray-400-color;
          padding: $jnt-gutter-tiny;
          height: 59px;
          box-sizing: border-box;
          &:last-child {
            border-right: 0;
          }
          &[data-empty] {
            border: none;
          }
          &[data-gutter] {
            border-right: 0;
          }
        }
      }
    }
    &[data-year] {
      @if $declare {
        [data-controls][child-of=jnt-gantt-host] {
          width: auto;
        }
      }
      [data-empty][child-of=jnt-gantt-host] {
        @if map-has-key($vars, title) {
          $title: map-get($vars, title);
          width: map-get($title, width);
        }
      }
    }
  }
}
@if $jnt-debug {
  @debug 'gantt compiled';
}