@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$tree: () !default;
$tree: map.merge(
  (
    label-color: inherit,
    label-color-hover: value('tree-label-color'),
    label-color-focus: value('tree-label-color-hover'),
    label-color-selected: value('tree-label-color-hover'),
    label-color-secondary: value('content-color-secondary'),
    label-color-disabled: value('content-color-disabled'),
    label-color-readonly: value('tree-label-color'),
    label-bg-color: transparent,
    label-bg-color-hover: value('fill-color-hover'),
    label-bg-color-focus: value('tree-label-bg-color-hover'),
    label-bg-color-selected: value('color-primary-opacity-8'),
    label-bg-color-disabled: value('tree-label-bg-color'),
    label-bg-color-readonly: value('tree-label-bg-color'),
    label-radius: value('radius-base'),
    label-gap: 6px,
    node-span: 4px,
    arrow-size: 22px,
    arrow-color: inherit,
    arrow-color-disabled: value('content-color-disabled'),
    indicator-color: value('color-primary-base'),
    indent-width: 16px,
    depth: -1,
    // link-line-index: -1,
    link-line-type: 'dashed',
    link-line-color: value('border-color-base')
  ),
  $tree
);

.#{$namespace}-tree {
  &-vars {
    @include define-preset-values('tree', $tree);
  }

  @include basis {
    position: relative;
  }

  @include inherit-color;

  $arrow-s: value('tree-arrow-size');
  $indent-w: value('tree-indent-width');
  $depth: value('tree-depth');

  $link-line: #{&}__link-line;

  &__link-line {
    position: absolute;
    pointer-events: none;
    border: 0 value('tree-link-line-type') value('tree-link-line-color');

    &--vertical {
      inset-inline-start: calc(#{$arrow-s} * 0.5 + #{$indent-w} * (#{$depth} - 1) - 1px);
      top: 0;
      bottom: 0;
      border-inline-start-width: 1px;
      transform: translateX(calc(-1 * #{value('tree-link-line-index')} * #{$indent-w}));

      @include rtl {
        transform: translateX(calc(#{value('tree-link-line-index')} * #{$indent-w}));
      }
    }

    &--horizontal {
      inset-inline-start: calc(#{$arrow-s} * 0.5 + #{$indent-w} * (#{$depth} - 1) - 1px);
      bottom: calc(50% - #{value('tree-node-span')});
      width: calc(#{$indent-w} * 0.5);
      border-bottom-width: 1px;
    }
  }

  &__list {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  &__content {
    display: flex;
    align-items: center;
    padding-inline-start: calc(#{$depth} * #{$indent-w});

    &--effect {
      transition: value('transition-color'), value('transition-background');

      &:hover {
        color: value('tree-label-color-hover');
        background-color: value('tree-label-bg-color-hover');
      }
    }
  }

  &__label {
    display: inline-flex;
    flex-grow: 1;
    align-items: center;
    padding: 0 4px;
    color: value('tree-label-color');
    cursor: pointer;
    background-color: value('tree-label-bg-color');
    border-radius: value('tree-label-radius');

    &--effect {
      transition: value('transition-color'), value('transition-background');

      &:hover {
        color: value('tree-label-color-hover');
        background-color: value('tree-label-bg-color-hover');
      }
    }
  }

  $content: #{&}__content;
  $label: #{&}__label;

  &__node {
    padding-top: value('tree-node-span');
    list-style: none;
    outline: 0;

    &--link-line {
      position: relative;
    }

    &--last #{$link-line}--first {
      bottom: calc(50% - #{value('tree-node-span')});
    }

    &--no-arrow #{$link-line}--horizontal {
      width: calc(#{$indent-w} * 0.5 + #{$arrow-s});
    }

    @mixin effect {
      #{$content}--effect,
      #{$label}--effect {
        @content;
      }
    }

    &--focused {
      @include effect {
        color: value('tree-label-color-focus');
        background-color: value('tree-label-bg-color-focus');
      }
    }

    &--selected {
      @include effect {
        &,
        &:hover {
          color: value('tree-label-color-selected');
          background-color: value('tree-label-bg-color-selected');
        }
      }
    }

    &--secondary {
      @include effect {
        &,
        &:hover {
          color: value('tree-label-color-secondary');
        }
      }
    }

    // &--disabled,
    // &--disabled:hover {
    //   @include effect {
    //     color: value('tree-label-color-disabled');
    //     cursor: default;
    //     background-color: value('tree-label-bg-color-disabled');
    //   }
    // }

    &--readonly {
      @include effect {
        &,
        &:hover {
          color: value('tree-label-color-readonly');
          cursor: default;
          background-color: value('tree-label-bg-color-readonly');
        }
      }
    }

    &--is-floor {
      @include effect {
        &,
        &:hover {
          cursor: pointer;
        }
      }
    }
  }

  &__content--effect#{&}__content--disabled {
    &,
    &:hover {
      color: value('tree-label-color-disabled');
      cursor: default;
      background-color: value('tree-label-bg-color-disabled');
    }
  }

  &__label--effect#{&}__label--disabled {
    &,
    &:hover {
      color: value('tree-label-color-disabled');
      cursor: default;
      background-color: value('tree-label-bg-color-disabled');
    }
  }

  &__text {
    display: flex;
    flex-grow: 1;
    align-items: center;
    max-width: 100%;
  }

  &__prefix,
  &__suffix {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    min-width: 0;
  }

  &__prefix {
    margin-inline-end: value('tree-label-gap');
  }

  &__suffix {
    margin-inline-start: value('tree-label-gap');
  }

  &__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: value('tree-arrow-size');
    height: value('tree-arrow-size');
    margin-inline-end: 2px;
    color: value('tree-arrow-color');
    cursor: pointer;
    transition: value('transition-color');

    &--transparent {
      visibility: hidden;
      opacity: 0%;
    }

    &--expanded .#{$namespace}-icon {
      transform: rotate(90deg);

      @include rtl {
        transform: rotate(-90deg);
      }
    }

    &--disabled {
      color: value('tree-arrow-color-disabled');
      cursor: not-allowed;
    }
  }

  &__checkbox {
    display: inline-flex;
    margin-inline-end: 6px;

    &--suffix {
      margin-inline: 6px 0;
    }
  }

  &__indicator {
    position: absolute;
    inset-inline: 0;
    height: 1px;
    background-color: value('tree-indicator-color');
    will-change: top, inset-inline-start;
  }
}