@use '@style/mixins/icon-hover.scss' as icon-hover;
@use '@style/theme/index.scss' as theme;
@use 'sass:math';
@use 'sass:string';
@use '@components/tree/style/token.scss' as *;
@use '@style/mixins/index.scss' as *;

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

/******* icon ******/

@include icon-hover.icon-hover(
  $tree-node-prefix-cls,
  $tree-size-default-icon-size,
  $tree-size-expand-icon-bg_hover
);

@mixin getLinePos($size) {
  top: ($size * 0.5) + ($tree-showline-size-switcher-icon * 0.5) +
    $tree-showline-spacing-line-vertical;
  bottom: math.min(
    -(
        ($size * 0.5) - ($tree-showline-size-switcher-icon * 0.5) -
          $tree-showline-spacing-line-vertical
      ),
    0
  );
}

@mixin getIndentLinePos($size) {
  top: $tree-showline-spacing-line-vertical -
    (($size * 0.5) - ($tree-showline-size-switcher-icon * 0.5));
  // 计算：距离上一节点的图标和下一节点的图标都是 $tree-showline-spacing-line-vertical
  bottom: math.min(
    -(
        ($size * 0.5) - ($tree-showline-size-switcher-icon * 0.5) -
          $tree-showline-spacing-line-vertical
      ),
    0
  );
}

.#{$tree-node-prefix-cls} {
  &-switcher {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    width: $tree-size-default-icon-size;
    height: $tree-size-default-line-height;
    margin-right: $tree-margin-switcher-icon-right;
    color: $tree-color-switcher-icon;
    font-size: $tree-size-default-icon-size;
    cursor: pointer;
    user-select: none;

    &-icon {
      position: relative;
      margin: 0 auto;

      svg {
        position: relative;
        transform: rotate(-90deg);
        transition: transform theme.$transition-duration-2
          theme.$transition-timing-function-standard;
      }
    }
  }

  &-expanded &-switcher-icon svg,
  &-is-leaf &-switcher-icon svg {
    transform: rotate(0);
  }

  &-drag-icon {
    margin-left: $tree-spacing-drag-icon-text;
    color: $tree-color-drag-icon;
    opacity: 0;
  }

  // 自定义icon
  &-custom-icon {
    margin-right: $tree-margin-custom-icon-right;
    font-size: inherit;
    line-height: 1;
    cursor: pointer;
    user-select: none;
  }

  .#{theme.$prefix}-icon-loading {
    color: $tree-color-loading-icon;
  }

  &-minus-icon,
  &-plus-icon {
    position: relative;
    display: block;
    width: $tree-showline-size-switcher-icon;
    height: $tree-showline-size-switcher-icon;
    background: $tree-showline-color-plus-icon-bg;
    border-radius: $tree-showline-border-plus-icon-radius;
    cursor: pointer;

    &::after {
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: $tree-showline-size-plus-icon-width;
      height: $tree-showline-size-plus-icon-stroke;
      margin-top: -($tree-showline-size-plus-icon-stroke * 0.5);
      margin-left: -($tree-showline-size-plus-icon-width * 0.5);
      color: $tree-color-switcher-icon;
      background-color: $tree-color-switcher-icon;
      border-radius: 0.5px;
      content: '';
    }
  }

  &-plus-icon::before {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: $tree-showline-size-plus-icon-stroke;
    height: $tree-showline-size-plus-icon-width;
    margin-top: -($tree-showline-size-plus-icon-width * 0.5);
    margin-left: -($tree-showline-size-plus-icon-stroke * 0.5);
    color: $tree-color-switcher-icon;
    background-color: $tree-color-switcher-icon;
    border-radius: 0.5px;
    content: '';
  }
}

/******* tree ***********/
.#{$tree-prefix-cls} {
  color: $tree-color-title-text;

  .#{theme.$prefix}-checkbox {
    margin-right: $tree-margin-checkbox-right;
    padding-left: 0;
    line-height: $tree-size-default-line-height;
  }

  &-node {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding-left: ($tree-size-expand-icon-bg_hover * 0.5) - ($tree-size-default-icon-size * 0.5);
    color: $tree-color-title-text;
    line-height: theme.$line-height-base;
    cursor: pointer;

    &-selected &-title,
    &-selected &-title:hover {
      color: $tree-color-title-text_active;
      transition: color theme.$transition-duration-2 theme.$transition-timing-function-standard;
    }

    &-disabled-selectable,
    &-disabled {
      .#{$tree-node-prefix-cls}-title,
      .#{$tree-node-prefix-cls}-title:hover {
        color: $tree-color-title-text_disabled;
        background: none;
        cursor: not-allowed;
      }
    }

    &-disabled.#{$tree-node-prefix-cls}-selected &-title {
      color: $tree-color-title-text_active_disabled;
    }
  }

  &-node-title-block {
    flex: 1;
    box-sizing: content-box;

    .#{$tree-node-prefix-cls}-drag-icon {
      position: absolute;
      right: $tree-spacing-drag-icon-right;
    }
    .#{$tree-node-prefix-cls}-title-text {
      display: block;
      width: 100%;
    }
  }

  &-node-title-with-ellipsis {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  &-node-title-text-ellipsis {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  &-node-title-ellipsis {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  &-node-indent {
    position: relative;
    flex-shrink: 0;
    align-self: stretch;
  }

  &-node-indent-block {
    position: relative;
    display: inline-block;
    width: $tree-size-default-icon-size;
    height: 100%;
    margin-right: $tree-margin-switcher-icon-right;
    vertical-align: top;
  }

  &-node-draggable {
    margin-top: $tree-draggable-size-gap-height;
  }

  &-node-title {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: -$tree-padding-title-horizontal;
    padding: (
        math.round(
            (
              $tree-size-default-line-height - theme.$line-height-base *
                $tree-size-default-font-size
            )
          ) *
          0.5
      )
      0;
    padding-right: $tree-padding-title-horizontal;
    padding-left: $tree-padding-title-horizontal;
    font-size: $tree-size-default-font-size;
    border-radius: $tree-node-border-radius;

    // overflow: hidden;
    &:hover {
      color: $tree-color-title-text_hover;
      background-color: $tree-color-title-bg_hover;

      .#{$tree-node-prefix-cls}-drag-icon {
        opacity: 1;
      }
    }

    // &-draggable {
    //   margin-top: $tree-draggable-size-gap-height;
    // }
    &-draggable::before {
      position: absolute;
      top: -$tree-draggable-size-gap-height;
      right: 0;
      left: 0;
      display: block;
      height: $tree-draggable-size-gap-height;
      border-radius: ($tree-draggable-size-gap-height * 0.5);
      content: '';
    }

    &-gap-bottom::before {
      top: unset;
      bottom: -$tree-draggable-size-gap-height;
      background-color: $tree-draggable-color-gap-bg;
    }

    &-gap-top::before {
      background-color: $tree-draggable-color-gap-bg;
    }

    &-highlight {
      color: $tree-color-title-text_highlight;
      background-color: $tree-color-title-bg_highlight;
    }

    &-dragging,
    &-dragging:hover {
      color: $tree-color-title-text_dragging;
      background-color: $tree-color-title-bg_dragging;
    }
  }

  // show line
  &-show-line {
    padding-left: ($tree-size-expand-icon-bg_hover * 0.5) -
      ($tree-showline-size-switcher-icon * 0.5);

    .#{$tree-prefix-cls}-node-switcher {
      width: $tree-showline-size-switcher-icon;
      text-align: center;

      .#{theme.$prefix}-tree-node-icon-hover {
        width: 100%;
      }
    }

    .#{$tree-prefix-cls}-node-indent-block {
      width: $tree-showline-size-switcher-icon;
    }

    .#{$tree-prefix-cls}-node-indent-block::before {
      position: absolute;
      left: 50%;
      box-sizing: border-box;
      width: $tree-showline-size-line-width;
      border-left: $tree-showline-size-line-width $tree-showline-style-line
        $tree-showline-color-line-bg;
      transform: translateX(-50%);
      content: '';

      @include getIndentLinePos($tree-size-default-line-height);
    }

    .#{$tree-prefix-cls}-node-is-leaf:not(.#{$tree-prefix-cls}-node-is-tail)
      .#{$tree-prefix-cls}-node-indent::after {
      position: absolute;
      right: -($tree-showline-size-switcher-icon * 0.5);
      box-sizing: border-box;
      width: $tree-showline-size-line-width;
      border-left: $tree-showline-size-line-width $tree-showline-style-line
        $tree-showline-color-line-bg;
      transform: translateX(50%);
      content: '';

      @include getLinePos($tree-size-default-line-height);
    }

    .#{$tree-prefix-cls}-node-indent-block-lineless:before {
      display: none;
    }
  }
}

/******** size *******/

.#{$tree-prefix-cls}-size-mini {
  .#{$tree-prefix-cls}-node-switcher {
    height: $tree-size-mini-line-height;
  }

  .#{theme.$prefix}-checkbox {
    line-height: $tree-size-mini-line-height;
  }

  .#{$tree-prefix-cls}-node-title {
    padding-top: (
      math.round(($tree-size-mini-line-height - 1.667 * $tree-size-mini-font-size)) * 0.5
    );
    padding-bottom: (
      (math.round(($tree-size-mini-line-height - 1.667 * $tree-size-mini-font-size)) * 0.5)
    );
    font-size: $tree-size-mini-font-size;
    line-height: 1.667;
  }

  .#{$tree-prefix-cls}-node-indent-block::after {
    @include getLinePos($tree-size-mini-line-height);
  }

  .#{$tree-prefix-cls}-node-is-leaf:not(.#{$tree-prefix-cls}-node-is-tail)
    .#{$tree-prefix-cls}-node-indent::before {
    @include getIndentLinePos($tree-size-mini-line-height);
  }
}

.#{$tree-prefix-cls}-size-small {
  .#{$tree-prefix-cls}-node-switcher {
    height: $tree-size-small-line-height;
  }

  .#{theme.$prefix}-checkbox {
    line-height: $tree-size-small-line-height;
  }

  .#{$tree-prefix-cls}-node-title {
    padding-top: (
      math.round(
          ($tree-size-small-line-height - theme.$line-height-base * $tree-size-small-font-size)
        ) *
        0.5
    );
    padding-bottom: (
      (
        math.round(
            ($tree-size-small-line-height - theme.$line-height-base * $tree-size-small-font-size)
          ) *
          0.5
      )
    );
    font-size: $tree-size-small-font-size;
  }

  .#{$tree-prefix-cls}-node-indent-block::after {
    @include getLinePos($tree-size-small-line-height);
  }

  .#{$tree-prefix-cls}-node-is-leaf:not(.#{$tree-prefix-cls}-node-is-tail)
    .#{$tree-prefix-cls}-node-indent::before {
    @include getIndentLinePos($tree-size-small-line-height);
  }
}

.#{$tree-prefix-cls}-size-large {
  .#{$tree-prefix-cls}-node-switcher {
    height: $tree-size-large-line-height;
  }

  .#{theme.$prefix}-checkbox {
    line-height: $tree-size-large-line-height;
  }

  .#{$tree-prefix-cls}-node-title {
    padding-top: (
      math.round(
          ($tree-size-large-line-height - theme.$line-height-base * $tree-size-large-font-size)
        ) *
        0.5
    );
    padding-bottom: (
      (
        math.round(
            ($tree-size-large-line-height - theme.$line-height-base * $tree-size-large-font-size)
          ) *
          0.5
      )
    );
    font-size: $tree-size-large-font-size;
  }

  .#{$tree-prefix-cls}-node-indent-block::after {
    @include getLinePos($tree-size-large-line-height);
  }

  .#{$tree-prefix-cls}-node-is-leaf:not(.#{$tree-prefix-cls}-node-is-tail)
    .#{$tree-prefix-cls}-node-indent::before {
    @include getIndentLinePos($tree-size-large-line-height);
  }
}

.#{$tree-prefix-cls}-node-list {
  overflow: hidden;
  transition: height theme.$transition-duration-2 theme.$transition-timing-function-standard;
}