@use '@style/theme/index.scss' as theme;
@use '@style/theme/index.scss' as global;
@use 'sass:string';
@use 'sass:map';
@use 'sass:meta';
@use '@style/mixins/index.scss' as *;
@use '@components/menu/style/token.scss' as token;
@use '@components/menu/style/token.scss' as *;
@use '@components/dropdown/style/token.scss' as dropdownToken;
@use '@components/dropdown/style/token.scss' as *;

$menu-prefix-cls: string.unquote('#{theme.$prefix}-menu');
$trigger-menu-prefix-cls: string.unquote('#{theme.$prefix}-trigger-menu');

$token-vars: map.merge(meta.module-variables('dropdownToken'), meta.module-variables('token'));

@function str-replace($input, $search, $replace: '') {
  $index: string.index($input, $search);

  @if $index == null {
    @return $input;
  }

  @return string.slice($input, 1, $index - 1) + $replace +
    str-replace(string.slice($input, $index + string.length($search)), $search, $replace);
}

@function token-var($name, $fallback: null) {
  $lookup-name: string.unquote('#{$name}');
  $value: map.get($token-vars, $lookup-name);

  @if $value == null {
    $dash-key: str-replace($lookup-name, '_', '-');

    @if $dash-key != $lookup-name {
      $value: map.get($token-vars, $dash-key);
    }
  }

  @if $value == null {
    $underscore-key: str-replace($lookup-name, '-', '_');

    @if $underscore-key != $lookup-name {
      $value: map.get($token-vars, $underscore-key);
    }
  }

  @if $value == null {
    @return $fallback;
  }

  @return $value;
}

@mixin applyStyleToItem() {
  .#{$menu-prefix-cls}-item,
  .#{$menu-prefix-cls}-group-title,
  .#{$menu-prefix-cls}-pop-header,
  .#{$menu-prefix-cls}-inline-header {
    @content;
  }
}

@mixin menu-text-color-transition() {
  transition: color theme.$transition-duration-2 theme.$transition-timing-function-standard;
}

@mixin menu-item-base() {
  @include applyStyleToItem() {
    position: relative;
    box-sizing: border-box;
    border-radius: $menu-border-radius;
    cursor: pointer;

    &.#{$menu-prefix-cls}-disabled {
      cursor: not-allowed;
    }

    &.#{$menu-prefix-cls}-selected {
      font-weight: $menu-font-weight-item-selected;

      @include menu-text-color-transition();

      svg {
        @include menu-text-color-transition();
      }
    }

    .#{theme.$prefix}-icon,
    .#{$menu-prefix-cls}-icon {
      margin-right: $menu-margin-right-item-prefix-icon;
    }

    .#{$menu-prefix-cls}-icon {
      .#{theme.$prefix}-icon {
        margin-right: 0;
      }
    }
  }
}

@mixin menu-item-mode($mode) {
  @include applyStyleToItem() {
    padding: 0 token-var('menu-#{$mode}-item-padding-horizontal');
    line-height: token-var('menu-#{$mode}-item-height');

    .#{$menu-prefix-cls}-icon-suffix .#{theme.$prefix}-icon {
      margin-right: 0;
    }
  }

  @include applyStyleToItem() {
    @if $mode == vertical {
      margin-bottom: $menu-item-gap;

      &:not(.#{$menu-prefix-cls}-has-icon) {
        @include text-ellipsis();
      }

      &.#{$menu-prefix-cls}-has-icon {
        display: flex;
        align-items: center;

        > .#{$menu-prefix-cls}-indent-list,
        > .#{$menu-prefix-cls}-icon {
          flex: none;
        }

        .#{$menu-prefix-cls}-icon {
          line-height: 1;
        }

        .#{$menu-prefix-cls}-title {
          @include text-ellipsis();
        }
      }

      .#{$menu-prefix-cls}-item-inner {
        @include text-ellipsis();

        width: 100%;
      }

      .#{$menu-prefix-cls}-icon-suffix {
        position: absolute;
        right: $menu-vertical-item-padding-horizontal;
      }
      /* stylelint-disable-next-line at-rule-empty-line-before */
    } @else {
      .#{theme.$prefix}-icon,
      .#{$menu-prefix-cls}-icon {
        margin-right: $menu-horizontal-margin-right-item-prefix-icon;
      }

      .#{$menu-prefix-cls}-icon-suffix {
        margin-left: $menu-margin-left-item-suffix-icon;
      }
    }
  }
}

@mixin menu-theme($theme) {
  &-#{$theme} {
    background-color: token-var('menu-#{$theme}-color-bg');

    @include applyStyleToItem() {
      color: token-var('menu-#{$theme}-color-item_default');
      background-color: token-var('menu-#{$theme}-color-bg-item_default');

      .#{theme.$prefix}-icon,
      .#{$menu-prefix-cls}-icon {
        color: token-var('menu-#{$theme}-color-icon_default');
      }

      &:hover {
        color: token-var('menu-#{$theme}-color-item_hover');
        background-color: token-var('menu-#{$theme}-color-bg-item_hover');

        .#{theme.$prefix}-icon,
        .#{$menu-prefix-cls}-icon {
          color: token-var('menu-#{$theme}-color-icon_hover');
        }
      }

      &.#{$menu-prefix-cls}-selected {
        color: token-var('menu-#{$theme}-color-item_selected');

        .#{theme.$prefix}-icon,
        .#{$menu-prefix-cls}-icon {
          color: token-var('menu-#{$theme}-color-icon_selected');
        }
      }

      &.#{$menu-prefix-cls}-disabled {
        color: token-var('menu-#{$theme}-color-item_disabled');
        background-color: token-var('menu-#{$theme}-color-bg-item_disabled');

        .#{theme.$prefix}-icon,
        .#{$menu-prefix-cls}-icon {
          color: token-var('menu-#{$theme}-color-icon_disabled');
        }
      }
    }

    .#{$menu-prefix-cls}-item.#{$menu-prefix-cls}-selected {
      background-color: token-var('menu-#{$theme}-color-bg-item_selected');
    }

    .#{$menu-prefix-cls}-inline-header.#{$menu-prefix-cls}-selected {
      color: token-var('menu-#{$theme}-color-submenu_selected');

      .#{theme.$prefix}-icon,
      .#{$menu-prefix-cls}-icon {
        color: token-var('menu-#{$theme}-color-submenu_selected');
      }

      &:hover {
        background-color: token-var('menu-#{$theme}-color-bg-submenu_selected_hover');
      }
    }

    &.#{$menu-prefix-cls}-horizontal {
      @include applyStyleToItem() {
        &.#{$menu-prefix-cls}-selected {
          background: none;

          @include menu-text-color-transition();

          &:hover {
            background-color: token-var('menu-#{$theme}-color-bg-item_hover');
          }
        }
      }
    }

    .#{$menu-prefix-cls}-group-title {
      color: token-var('menu-#{$theme}-color-group-title');
      pointer-events: none;
    }

    .#{$menu-prefix-cls}-collapse-button {
      color: token-var('menu-#{$theme}-color-button');
      background-color: token-var('menu-#{$theme}-color-bg-button');

      &:hover {
        background-color: token-var('menu-#{$theme}-color-bg-button_hover');
      }
    }
  }
}

@keyframes #{theme.$prefix}-menu-selected-item-label-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.#{$menu-prefix-cls} {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  font-size: $menu-font-size;
  line-height: $menu-line-height;
  transition: width theme.$transition-duration-2 theme.$transition-timing-function-standard;

  &:focus-visible {
    outline: 3px solid var(string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-2'));
  }

  // 设置菜单层级的缩进
  &-indent {
    display: inline-block;
    width: $menu-item-indent-spacing;
  }

  &-ellipsis-wrapper {
    display: inline-flex;
    flex: 1;
    min-width: 0;
  }

  &-ellipsis {
    width: 100%;
    min-width: 0;
  }

  @include menu-item-base();
  @include menu-theme(light);
  @include menu-theme(dark);

  // 校正 a 标签颜色
  a,
  a:hover,
  a:focus,
  a:active {
    color: inherit;
    text-decoration: none;
    cursor: inherit;
  }

  &-inner {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: auto;
  }

  // 展开折叠图标
  &-icon-suffix {
    &.is-open {
      transform: rotate(180deg);
    }
  }

  &-vertical {
    @include menu-item-mode(vertical);

    .#{$menu-prefix-cls}-inner {
      padding: $menu-vertical-padding-vertical $menu-vertical-padding-horizontal;
    }

    .#{$menu-prefix-cls}-item.#{$menu-prefix-cls}-item-indented {
      display: flex;
      align-items: center;
    }

    // 为 header 右侧预留下放置 suffixIcon 的空间
    .#{$menu-prefix-cls}-pop-header,
    .#{$menu-prefix-cls}-inline-header {
      padding-right: $menu-vertical-item-padding-horizontal + 16;
    }

    .#{$menu-prefix-cls}-pop-header.#{$menu-prefix-cls}-ellipsis-enabled,
    .#{$menu-prefix-cls}-inline-header.#{$menu-prefix-cls}-ellipsis-enabled,
    .#{$menu-prefix-cls}-group-title.#{$menu-prefix-cls}-ellipsis-enabled {
      display: flex;
      align-items: center;
    }
  }

  // 水平菜单中，仅允许出现普通 item 和 popSubMenu
  &-horizontal {
    width: 100%;
    height: auto;

    @include menu-item-mode(horizontal);

    .#{$menu-prefix-cls}-inner {
      display: flex;
      align-items: center;
      padding: $menu-horizontal-padding-vertical $menu-horizontal-padding-horizontal;
    }

    .#{$menu-prefix-cls}-item,
    .#{$menu-prefix-cls}-pop {
      display: inline-block;
      flex-shrink: 0;
      vertical-align: middle;

      &:not(:first-child) {
        margin-left: $menu-horizontal-item-gap;
      }
    }

    .#{$menu-prefix-cls}-pop::after {
      position: absolute;
      bottom: -$menu-horizontal-padding-vertical;
      left: 0;
      width: 100%;
      height: $menu-horizontal-padding-vertical;
      content: ' ';
    }
  }

  // 水平菜单的动态折叠容器
  &-overflow {
    &-wrap {
      width: 100%;
    }

    &-sub-menu-mirror,
    &-hidden-menu-item {
      position: absolute !important;
      white-space: nowrap;
      visibility: hidden;
      pointer-events: none;
    }
  }

  // 选中状态下的提示浮标，相对于 MenuItem 定位
  &-selected-label {
    position: absolute;
    right: $menu-horizontal-item-padding-horizontal;
    bottom: -$menu-horizontal-padding-vertical;
    left: $menu-horizontal-item-padding-horizontal;
    height: $menu-height-label-item-selected;
    background-color: $menu-color-label-item-selected;
    animation: #{theme.$prefix}-menu-selected-item-label-enter theme.$transition-duration-2
      theme.$transition-timing-function-standard;
  }

  &-pop-button {
    width: auto;
    background: none;
    box-shadow: none;

    &.#{$menu-prefix-cls}-collapsed {
      width: auto;
    }

    @include applyStyleToItem() {
      width: $menu-pop-button-size;
      height: $menu-pop-button-size;
      margin-bottom: $menu-pop-button-margin-bottom;
      line-height: $menu-pop-button-size;
      border: 1px solid $menu-pop-button-border-color;
      border-radius: 50%;
      box-shadow: $menu-pop-button-box-shadow;
    }
  }

  // 折叠样式
  &-collapsed {
    width: $menu-collapse-width;

    .#{$menu-prefix-cls}-inner {
      padding: $menu-collapse-padding-vertical $menu-collapse-padding-horizontal;
    }

    .#{$menu-prefix-cls}-icon-suffix {
      display: none;
    }

    // Hide text after icon when menu is collapsed
    .#{$menu-prefix-cls}-has-icon {
      > *:not(.#{$menu-prefix-cls}-icon) {
        opacity: 0;
      }
    }

    @include applyStyleToItem() {
      .#{theme.$prefix}-icon {
        margin-right: 100%;
      }
    }
  }

  // 处于 Sider rail 常驻态时，折叠宽度对齐 railWidth（>48px），
  // 默认靠左的图标需在 railWidth 内居中。
  &.#{$menu-prefix-cls}-in-sider-rail {
    &.#{$menu-prefix-cls}-collapsed {
      .#{$menu-prefix-cls}-item {
        justify-content: center;
      }

      // 折叠态文字本就 opacity:0，这里彻底移出布局，让图标借 justify-content 居中。
      .#{$menu-prefix-cls}-item-inner {
        display: none;
      }

      .#{$menu-prefix-cls}-icon {
        margin-right: 0;
        line-height: token-var('menu-vertical-item-height');
      }
    }
  }

  // 折叠按钮
  &-collapse-button {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: $menu-width-collapse-button;
    height: $menu-height-collapse-button;
    border-radius: $menu-border-radius-collapse-button;
    cursor: pointer;
  }

  // sub-menu-inline 的内容区域样式
  &-inline-content {
    height: auto;
    overflow: hidden;
    transition: height theme.$transition-duration-2 theme.$transition-timing-function-standard;

    &-hide {
      height: 0;
    }
  }

  // 弹出的 ToolTip 中 a 标签的样式
  &-item-tooltip a {
    color: inherit;
    cursor: text;

    &:hover,
    &:focus,
    &:active {
      color: inherit;
    }
  }

  // 弹出菜单浮层三角箭头
  &-pop-trigger {
    &.#{theme.$prefix}-trigger-position-bl {
      transform: translateY($menu-horizontal-padding-vertical);

      .#{theme.$prefix}-trigger-arrow {
        z-index: 0;
        border-top: 1px solid $menu-color-border-popup;
        border-left: 1px solid $menu-color-border-popup;
      }
    }

    &.#{theme.$prefix}-trigger-position-rt {
      transform: translateX($menu-vertical-padding-horizontal);

      .#{theme.$prefix}-trigger-arrow {
        z-index: 0;
        border-bottom: 1px solid $menu-color-border-popup;
        border-left: 1px solid $menu-color-border-popup;
      }
    }

    &.#{$menu-prefix-cls}-pop-trigger-dark {
      .#{theme.$prefix}-trigger-arrow {
        background-color: $menu-dark-color-bg;
        border-color: $menu-dark-color-bg;
      }
    }
  }
}

// trigger 里的 menu
.#{$trigger-menu-prefix-cls} {
  position: relative;
  box-sizing: border-box;
  max-height: $dropdown-max-height;
  padding: $dropdown-padding-vertical 0;
  overflow: auto;
  background-color: $dropdown-color-bg;
  border: 1px solid $dropdown-color-border;
  border-radius: $dropdown-border-radius;
  box-shadow: $dropdown-box-shadow;

  &-hidden {
    display: none;
  }

  &-item,
  &-pop-header {
    position: relative;
    // 避免 Trigger 的小箭头位于其上方
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    height: $dropdown-option-height;
    padding: 0 $dropdown-option-padding-horizontal;

    // default
    color: $dropdown-option-color-text_default;
    font-size: $dropdown-font-size;
    line-height: $dropdown-option-height;
    text-align: left;
    background-color: $dropdown-option-color-bg_default;
    cursor: pointer;

    @include text-ellipsis();

    // selected
    &.#{$trigger-menu-prefix-cls}-selected {
      color: $dropdown-option-color-text_selected;
      font-weight: $dropdown-option-font-weight_selected;
      background-color: $dropdown-option-color-bg_selected;
      transition:
        color theme.$transition-duration-1 theme.$transition-timing-function-standard,
        background-color theme.$transition-duration-1 theme.$transition-timing-function-standard;
    }

    // hover
    &:hover {
      color: $dropdown-option-color-text_hover;
      background-color: $dropdown-option-color-bg_hover;
    }

    // disabled
    &.#{$trigger-menu-prefix-cls}-disabled {
      color: $dropdown-option-color-text_disabled;
      background-color: $dropdown-option-color-bg_disabled;
      cursor: not-allowed;
    }
  }

  .#{$trigger-menu-prefix-cls}-has-icon {
    display: flex;
    align-items: center;

    .#{$trigger-menu-prefix-cls}-icon {
      margin-right: 8px;
      line-height: 1;
    }

    > * {
      flex: none;
    }

    .#{$trigger-menu-prefix-cls}-title {
      flex: auto;

      @include text-ellipsis();
    }
  }

  &-pop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .#{$trigger-menu-prefix-cls}-icon-suffix {
      margin-left: $dropdown-margin-left-suffix-icon;
    }
  }

  &-group {
    &:first-child &-title {
      padding-top: $dropdown-group-title-padding-top - $dropdown-padding-vertical;
    }
  }

  &-group-title {
    box-sizing: border-box;
    width: 100%;
    padding: $dropdown-group-title-padding-top $dropdown-group-title-padding-horizontal 0
      $dropdown-group-title-padding-horizontal;
    color: $dropdown-group-title-color-text;
    font-size: $dropdown-group-title-font-size;
    line-height: $dropdown-group-title-height;

    @include text-ellipsis();
  }

  &-pop-trigger {
    // 下拉框的 menu 弹出不需要小箭头
    .#{theme.$prefix}-trigger-arrow {
      display: none;
    }
  }

  &-dark {
    background-color: $dropdown-dark-color-bg;
    border-color: $dropdown-dark-color-border;

    .#{$trigger-menu-prefix-cls}-item,
    .#{$trigger-menu-prefix-cls}-pop-header {
      // default
      color: $dropdown-dark-option-color-text_default;
      background-color: $dropdown-dark-option-color-bg_default;

      // selected
      &.#{$trigger-menu-prefix-cls}-selected {
        color: $dropdown-dark-option-color-text_selected;
        background-color: $dropdown-dark-option-color-bg_selected;

        &:hover {
          color: $dropdown-dark-option-color-text_selected;
        }
      }

      // hover
      &:hover {
        color: $dropdown-dark-option-color-text_hover;
        background-color: $dropdown-dark-option-color-bg_hover;
      }

      // disabled
      &.#{$trigger-menu-prefix-cls}-disabled {
        color: $dropdown-dark-option-color-text_disabled;
        background-color: $dropdown-dark-option-color-bg_disabled;
      }
    }

    .#{$trigger-menu-prefix-cls}-group-title {
      color: $dropdown-dark-group-title-color-text;
    }
  }
}