@use '@angular/material' as mat;
@use 'sass:map';
@use '../../styles/mixins';
@use '../../styles/typography';

@mixin tree-theme($theme) {
  $color-config: mat.get-color-config($theme);
  $primary: mat.get-color-from-palette(map.get($color-config, primary));
  $primary-50: mat.get-color-from-palette(map.get($color-config, primary), 50);
  $foreground: map.get($color-config, foreground);

  .epag-tree__item {
    // The treeitem wraps its whole subtree, so the focus ring goes on its own row only.
    &:focus-visible > .epag-tree__row {
      outline: 2px solid $primary;
    }
  }

  .epag-tree__row {
    color: map.get($foreground, text);

    &--selected {
      background: $primary-50;
    }
  }

  .epag-tree__chevron {
    // Set on the icon itself: epag-icon gives its own host a colour, so it would not inherit this one.
    > epag-icon {
      color: map.get($foreground, disabled) !important;
    }
  }

  .epag-tree__icon {
    color: map.get($foreground, disabled) !important;
  }

  .epag-tree__icon {
    .epag-tree__row--folder &,
    .epag-tree__row--selected & {
      color: $primary !important;
    }
  }

  .epag-tree__label {
    .epag-tree__row--selected & {
      color: $primary;
    }
  }

  .epag-tree__check {
    color: $primary !important;
  }
}

$tree-indent-base: 8px;
$tree-indent-step: 20px;

:host {
  display: block;
}

.epag-tree,
.epag-tree__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.epag-tree__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  outline: none;

  // The treeitem wraps its whole subtree, so the focus ring goes on its own row only.
  &:focus-visible > .epag-tree__row {
    outline-offset: -2px;
  }
}

.epag-tree__row {
  display: flex;
  align-items: center;
  gap: 8px;

  // --epag-tree-depth is the row's nesting depth, set per row by the template.
  padding: 8px 12px 8px
    calc(#{$tree-indent-base} + var(--epag-tree-depth, 0) * #{$tree-indent-step});
  border-radius: 6px;
  user-select: none;

  &--interactive {
    cursor: pointer;
  }
}

.epag-tree__chevron {
  @include mixins.square(14px);
  display: inline-flex;
  flex-shrink: 0;
}

.epag-tree__icon {
  flex-shrink: 0;
}

.epag-tree__label {
  @include typography.text-sm;
  @include mixins.ellipsis;
  flex: 1 1 0;
  min-width: 0;
  font-weight: map.get(typography.$font-weights, 'normal');

  .epag-tree__row--folder & {
    font-weight: map.get(typography.$font-weights, 'semibold');
  }

  .epag-tree__row--selected & {
    font-weight: map.get(typography.$font-weights, 'semibold');
  }
}

.epag-tree__end {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
}