@import '../jnt-variables';
@import '../navigation/link';
@import '../jnt-functions';
@import '../jnt-hosts';

$tab-marker-height: 4px;
@mixin jnt-menu($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    top: (
      item: (
        corner: $jnt-corner-small,
        font-size: $jnt-font-size-base,
        height: null,
        padding: $jnt-gutter-small $jnt-gutter-normal,
        orphan: (
          color: $jnt-primary-text-color,
          hover: (
            color: $jnt-primary-text-color,
            background-color: $jnt-highlight-background
          )
        ),
        color: $jnt-primary-text-color,
        text-transform: null,
        font-weight: $jnt-font-weight-base,
        icon: (
          spacing: $jnt-gutter-small,
          color: $jnt-primary-text-color,
          size: 24px,
        ),
        focus: (
          outline: null,
          shadow: inset $jnt-outline-shadow-small $jnt-primary-light-color
        ),
        toggle: (
          toggle: true,
          margin-left: $jnt-gutter-small,
          color: $jnt-primary-text-color
        ),
        hover: (
          color: null,
          background-color: $jnt-highlight-background
        ),
        active: (
          underline: true,
          background-color: null,
          color: $jnt-primary-light-color,
          underline-color: $jnt-primary-light-color,
          shadow: null
        ),
        styles: (
          tags: (
            padding: $jnt-gutter-tiny $jnt-gutter-normal,
            color: $jnt-primary-light-color,
            corner: 19px,
            border: 1px solid $jnt-white-color,
            active: (
              underline: false,
              color: $jnt-white-color,
              background-color: $jnt-primary-light-color,
              border-color: $jnt-primary-light-color
            ),
            hover: (
              color: null,
              background-color: $jnt-secondary-dark-color,
              border-color: null
            )
          )
        )
      )
    ),
    sub: (
      width: 200px,
      background-color: $jnt-primary-background,
      shadow: $jnt-shadow-normal,
      corner: $jnt-corner-small,
      collapsed: (
        item: (
          padding: $jnt-gutter-small $jnt-gutter-normal
        )
      ),
      title: (
        padding: 0 $jnt-gutter-small,
        border-bottom: 1px solid $jnt-muted-color
      ),
      item: (
        padding: $jnt-gutter-small $jnt-gutter-normal,
        height: null,
        color: $jnt-primary-text-color,
        corner: $jnt-corner-small,
        font-size: $jnt-font-size-base,
        icon: (
          spacing: $jnt-gutter-small,
          color: $jnt-primary-text-color,
          size: 24px
        ),
        hover: (
          color: null,
          background-color: $jnt-highlight-background
        ),
        active: (
          underline: false,
          background-color: null,
          color: $jnt-primary-light-color,
          shadow: null
        ),
        focus: (
          outline: null,
          shadow: inset $jnt-outline-shadow-small $jnt-primary-light-color
        )
      )
    )
  );
  $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-menu-host)} {
    @if $declare {
      display: block;
      &[data-orientation='vertical'] {
        #{$wrapper} [data-top][child-of=jnt-menu-host] {
          width: 100%;
        }
      }
    }
    &[data-style='default'] {
      #{$wrapper} [data-top][child-of=jnt-menu-host] {
        [data-item][child-of=jnt-menu-host] {
          @if map-has-key($vars, top) {
            $title: map-get(map-get($vars, top), item);
            @include jnt-link((
              height: map-get($title, height),
              corner: map-get($title, corner),
              font-size: map-get($title, font-size),
              text-transform: map-get($title, text-transform),
              font-weight: map-get($title, font-weight),
              outlines: (
                transparent: (
                  color: map-get($title, color),
                  padding: map-get($title, padding)
                )
              )
            ));
            @if map-has-key($title, active) {
              $active: map-get($title, active);
              @include jnt-link((
                outlines: (
                  transparent: (
                    active: (
                      underline: map-get($active, underline),
                      background-color: map-get($active, background-color),
                      color: map-get($active, color),
                      underline-color: map-get($active, border-color),
                      shadow: map-get($active, shadow)
                    )
                  )
                )
              ));
            }
            @if map-has-key($title, orphan) {
              $orphan: map-get($title, orphan);
              @include jnt-link((
                outlines: (
                  transparent: (
                    orphan: (
                      color: map-get($orphan, color)
                    )
                  )
                )
              ));
              @if map-has-key($orphan, hover) {
                $hover: map-get($orphan, hover);
                @include jnt-link((
                  outlines: (
                    transparent: (
                      orphan: (
                        hover: (
                          color: map-get($hover, color),
                          background-color: map-get($hover, background-color)
                        )
                      )
                    )
                  )
                ));
              }
            }
            @if map-has-key($title, icon) {
              $icon: map-get($title, icon);
              @include jnt-link((
                icon: (
                  spacing: map-get($icon, spacing),
                  color: map-get($icon, color),
                  size: map-get($icon, size),
                )
              ));
            }
            @if map-has-key($title, toggle) {
              $toggle: map-get($title, toggle);
              @include jnt-link((
                toggle: (
                  toggle: map-get($toggle, toggle),
                  margin-left: map-get($toggle, margin-left),
                  color: map-get($toggle, color)
                )
              ));
            }
            @if map-has-key($title, hover) {
              $hover: map-get($title, hover);
              @include jnt-link((
                outlines: (
                  transparent: (
                    hover: (
                      color: map-get($hover, color),
                      background-color: map-get($hover, background-color)
                    )
                  )
                )
              ));
            }
            @if map-has-key($title, focus) {
              $focus: map-get($title, focus);
              [data-link][child-of=jnt-menu-host] {
                @include jnt-link((
                  focus: (
                    outline: map-get($focus, outline),
                    shadow: map-get($focus, shadow)
                  )
                ), '&');
              }
            }
            [data-spinner][child-of=jnt-menu-host] {
              @if $declare {
                margin-right: $jnt-gutter-tiny;
              }
            }
          }
        }
      }
    }
    &[data-style='tabs'] {
      @if $declare {
        border-bottom: 2px solid $jnt-secondary-color;
      }
      #{$wrapper} [data-link][child-of=jnt-menu-host] {
        @if $declare {
          @include jnt-link((
            height: 44px,
            padding: $jnt-gutter-small $jnt-gutter-normal ($jnt-gutter-small + $tab-marker-height) $jnt-gutter-normal,
            color: $jnt-primary-text-color
          ), '&');
          &:after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 4px;
            border-radius: 5px;
            background-color: transparent;
          }
          &:hover {
            @include jnt-link((
              color: $jnt-primary-light-color
            ), '&');
            &:after {
              background-color: $jnt-secondary-dark-color;
            }
          }
          &[data-active='true'] {
            @include jnt-link((
              outlines: (
                transparent: (
                  active: (
                    underline: false,
                    color: $jnt-primary-light-color
                  )
                )
              )
            ), '&');
            &:after {
              background-color: $jnt-primary-light-color;
            }
          }
        }
      }
    }
    &[data-style='tags'] {
      #{$wrapper} [data-link][child-of=jnt-menu-host] {
        @if map-has-key($vars, top) {
          $title: map-get(map-get($vars, top), item);
          @if map-has-key($title, styles) {
            $styles: map-get($title, styles);
            @if map-has-key($styles, tags) {
              $tags: map-get($styles, tags);
              @include jnt-link((
                padding: map-get($tags, padding),
                color: map-get($tags, color),
                border: map-get($tags, border),
                corner: map-get($tags, corner)
              ), '&');
              &[data-active='true'] {
                @if map-has-key($tags, active) {
                  $active: map-get($tags, active);
                  @include jnt-link((
                    outlines: (
                      transparent: (
                        active: (
                          underline: map-get($active, underline),
                          color: map-get($active, color),
                          background-color: map-get($active, background-color),
                          border-color: map-get($active, border-color)
                        )
                      )
                    )
                  ), '&');
                }
              }
              &[data-active='false']:hover {
                @if map-has-key($tags, hover) {
                  $hover: map-get($tags, hover);
                  @include jnt-link((
                    hover: (
                      color: map-get($hover, color),
                      background-color: map-get($hover, background-color),
                      border-color: map-get($hover, border-color)
                    )
                  ), '&');
                }
              }
            }
          }
        }
      }
    }
  }
  [data-spinner][child-of=jnt-menu-host] {
    @if $declare {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      display: grid;
      place-items: center;
      background-color: rgba($jnt-primary-background, .85);
      z-index: 1;
    }
  }
  #{$context} #{$wrapper} [data-top][child-of=jnt-menu-host] {
    position: relative;
    white-space: nowrap;
    box-sizing: border-box;
    [data-item][child-of=jnt-menu-host] {
      display: flex;
      align-items: center;
      user-select: none;
      height: 100%;
      [data-link][child-of=jnt-menu-host] {
        width: 100%;
        @include jnt-link((
          overflow: true
        ), '&');
      }
    }
  }
  #{$context} #{$wrapper} [data-sub][child-of=jnt-menu-host] {
    @if $declare {
      width: 100%;
      display: none;
      align-items: stretch;
      flex-direction: column;
      &[data-opened='true'],
      &[data-orientation='horizontal'],
      &[data-orientation='vertical'][data-collapsed='true'] {
        display: flex;
      }
    }
    > [data-section][child-of=jnt-menu-host] {
      @if $declare {
        user-select: none;
      }
      span[child-of=jnt-menu-host] {
        @if $declare {
          display: block;
          padding: $jnt-gutter-normal 0;
        }
      }
    }
    [data-item][child-of=jnt-menu-host] {
      position: relative;
      [data-link][child-of=jnt-menu-host] {
        @if $declare {
          user-select: none;
          width: 100%;
          @include jnt-link((
            overflow: true,
            display: block
          ), '&');
        }
      }
    }
  }
  #{$context} #{$wrapper} [data-sub][child-of=jnt-menu-host] {
    @if map-has-key($vars, sub) {
      $sub: map-get($vars, sub);
      &[data-collapsed='true'] {
        @if map-has-key($sub, collapsed) {
          $collapsed: map-get($sub, collapsed);
          @if map-has-key($collapsed, item) {
            $item: map-get($collapsed, item);
            [data-item][child-of=jnt-menu-host] [data-link][child-of=jnt-menu-host] {
              @include jnt-link((
                outlines: (
                  transparent: (
                    padding: map-get($item, padding)
                  )
                )
              ), '&');
            }
          }
        }
      }
      min-width: map-get($sub, width);
      @if map-has-key($sub, title) {
        $title: map-get($sub, title);
        > [data-section][child-of=jnt-menu-host] {
          padding: map-get($title, padding);
          border-bottom: map-get($title, border-bottom);
          span[child-of=jnt-menu-host] {
            flex: 1;
          }
        }
      }
      @if map-has-key($sub, item) {
        $item: map-get($sub, item);
        [data-item][child-of=jnt-menu-host] [data-link][child-of=jnt-menu-host] {
          @include jnt-link((
            height: map-get($item, height),
            corner: map-get($item, corner),
            font-size: map-get($item, font-size),
            outlines: (
              transparent: (
                padding: map-get($item, padding),
                color: map-get($item, color)
              )
            )
          ), '&');
          @if map-has-key($item, icon) {
            $icon: map-get($item, icon);
            @include jnt-link((
              icon: (
                spacing: map-get($icon, spacing),
                size: map-get($icon, size),
                color: map-get($icon, color)
              )
            ), '&');
          }
          @if map-has-key($item, hover) {
            $hover: map-get($item, hover);
            @include jnt-link((
              outlines: (
                transparent: (
                  hover: (
                    background-color: map-get($hover, background-color),
                    color: map-get($hover, color)
                  ),
                  orphan: (
                    hover: (
                      background-color: map-get($hover, background-color),
                      color: map-get($hover, color)
                    )
                  )
                )
              )
            ), '&');
          }
          @if map-has-key($item, focus) {
            $focus: map-get($item, focus);
            @include jnt-link((
              focus: (
                outline: map-get($focus, outline),
                shadow: map-get($focus, shadow)
              )
            ), '&');
          }
          @if map-has-key($item, active) {
            $active: map-get($item, active);
            @include jnt-link((
              outlines: (
                transparent: (
                  active: (
                    underline: map-get($active, underline),
                    background-color: map-get($active, background-color),
                    color: map-get($active, color),
                    border-color: map-get($active, border-color),
                    shadow: map-get($active, shadow)
                  )
                )
              )
            ), '&');
          }
        }
      }
    }
  }
}
@if $jnt-debug {
  @debug 'menu compiled';
}