@use 'sass:map';
@use '../../base' as *;

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
@mixin tree($theme) {
    @include css-vars($theme);

    $variant: map.get($theme, '_meta', 'theme');
    $indigo-theme: $variant == 'indigo';

    $node-indent-default: (
        comfortable: rem(24px),
        cosy: rem(16px),
        compact: rem(12px)
    );

    $node-indent-indigo: (
        comfortable: rem(16px),
        cosy: rem(12px),
        compact: rem(8px)
    );

    $icon-size-default: rem(24px);
    $icon-space-default: rem(8px);

    $icon-size-indigo: rem(16px);
    $icon-space-indigo: rem(4px);

    $node-indent: map.get((
        'material': $node-indent-default,
        'fluent': $node-indent-default,
        'bootstrap': $node-indent-default,
        'indigo': $node-indent-indigo
    ), $variant);

    $icon-size: map.get((
        'material': $icon-size-default,
        'fluent': $icon-size-default,
        'bootstrap': $icon-size-default,
        'indigo': $icon-size-indigo
    ), $variant);

    $icon-space: map.get((
        'material': $icon-space-indigo,
        'fluent': $icon-space-default,
        'bootstrap': $icon-space-default,
        'indigo': $icon-space-indigo
    ), $variant);

    $circular-bar-size: (
        comfortable: #{$icon-size},
        cosy: calc(#{$icon-size} - 4px),
        compact: calc(#{$icon-size} - 6px)
    );

    $drop-indicator-width: (
        comfortable: calc(100% - ((#{map.get($node-indent, 'comfortable')} * 2) + (#{$icon-size} + #{$icon-space}))),
        cosy: calc(100% - ((#{map.get($node-indent, 'cosy')} * 2) + (#{$icon-size} + #{$icon-space}))),
        compact: calc(100% - ((#{map.get($node-indent, 'compact')} * 2) + (#{$icon-size} + #{$icon-space})))
    );

    %tree-display {
        display: block;
        z-index: 0;
        overflow-y: auto;
    }

    %tree-node,
    %node-wrapper,
    %node-toggle-button,
    %node-content,
    %node-select {
        display: flex;
    }

    %tree-node {
        @include sizable();

        --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
        --tree-size: var(--component-size);
        flex-direction: column;

        %cbx-composite-wrapper {
            @if $variant == 'material' {
                padding: 0;
            }
        }

        @if $variant == 'indigo' {
            border-radius: rem(4px);
        }
    }

    %node-wrapper,
    %node-toggle-button,
    %node-select {
        align-items: center;
    }

    %node-toggle-button,
    %node-select {
        margin-inline-end: $icon-space;
    }

    @if $variant == 'material' {
        %node-select {
            margin-inline: rem(10px) rem(14px);
        }
    }

    @if $variant == 'indigo' {
        %node-select {
            margin-inline-end: rem(8px);
        }
    }

    %node-content,
    %node-toggle-button,
    %node-select {
        z-index: 1;
    }

    %node-toggle-button--hidden {
        visibility: hidden;
    }

    %node-wrapper {
        min-height: var-get($theme, 'size');
        padding-inline: pad-inline(map.get($node-indent, 'compact'), map.get($node-indent, 'cosy'), map.get($node-indent, 'comfortable'));
        padding-block: 0;
        position: relative;
        background: var-get($theme, 'background');
        color: var-get($theme, 'foreground');

        @if $variant == 'indigo' {
            border-radius: rem(4px);
            margin-block-end: rem(4px);

            &::after {
                border-radius: rem(4px);
            }

            igx-icon {
                color: var-get($theme, 'icon-color');
            }
        }

        igx-icon {
            --component-size: #{if($variant == 'indigo', 2, 3)};
        }

        [dir='rtl'] & {
            igx-icon {
                transform: scaleX(-1);
            }
        }

        &::after {
            content: '';
            position: absolute;
            top: 0;
            inset-inline-start: 0;
            width: 100%;
            height: 100%;
            background: transparent;
            z-index: 0;
        }

        &:hover {
            &::after {
                background: var-get($theme, 'hover-color');
            }

            @if $variant == 'indigo' {
                color: var-get($theme, 'foreground-active');
            }
        }

        &:focus {
            outline-width: 0;
        }

        igx-circular-bar {
            --diameter: #{sizable(#{map.get($circular-bar-size, 'compact')}, #{map.get($circular-bar-size, 'cosy')}, #{map.get($circular-bar-size, 'comfortable')})};
        }
    }

    %node-wrapper--selected {
        background: var-get($theme, 'background-selected');
        color: var-get($theme, 'foreground-selected');

        &:hover {
            &::after {
                background: var-get($theme, 'hover-selected-color');

                @if $variant == 'indigo' {
                    background: var-get($theme, 'hover-color');
                }
            }
        }
    }

    %node-wrapper--active {
        background: var-get($theme, 'background-active');
        color: var-get($theme, 'foreground-active');

        @if $variant == 'indigo' {
            &:hover {
                background: var-get($theme, 'hover-selected-color');

                &::after {
                    background: transparent;
                }
            }
        }
    }

    %node-wrapper--active-selected {
        background: var-get($theme, 'background-active-selected');
        color: var-get($theme, 'foreground-active-selected');

        @if $variant == 'indigo' {
            &:hover {
                background: var-get($theme, 'hover-selected-color');
            }

            &::after {
                background: transparent;
            }
        }
    }

    %node-wrapper--focused {
        box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color');

        @if $variant == 'indigo' {
            box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'border-color');
        }
    }

    %node-wrapper--disabled {
        background: var-get($theme, 'background-disabled') !important;
        color: var-get($theme, 'foreground-disabled') !important;

        @if $variant == 'indigo' {
            igx-icon {
                color: var-get($theme, 'foreground-disabled') !important;
            }
        }

        box-shadow: none !important;

        pointer-events: none;

        &::after {
            display: none;
        }

        %node-toggle-button {
            color: var-get($theme, 'foreground-disabled') !important;
        }
    }

    %node-spacer {
        --component-size: var(--tree-size);
        --spacer: #{sizable(#{map.get($node-indent, 'compact')}, #{map.get($node-indent, 'cosy')}, #{map.get($node-indent, 'comfortable')})};

        @if $variant == 'indigo' {
            --spacer: #{$icon-size};
        }

        width: var(--spacer);
        display: inline-block;
    }

    %node-content {
        display: block;
        align-items: center;
        flex: 1;
        @include ellipsis();
    }

    %node-toggle-button {
        justify-content: center;
        cursor: pointer;
        user-select: none;
        min-width: $icon-size
    }

    %node-drop-indicator {
        display: flex;
        visibility: hidden;
        position: absolute;
        inset-inline-end: pad(map.get($node-indent, 'compact'), map.get($node-indent, 'cosy'), map.get($node-indent, 'comfortable'));
        bottom: 0;
        width: pad(map.get($drop-indicator-width, 'compact'), map.get($drop-indicator-width, 'cosy'), map.get($drop-indicator-width, 'comfortable'));

        > div {
            flex: 1;
            height: rem(1px);
            background: var-get($theme, 'drop-area-color');
        }
    }

    %node-group {
        overflow: hidden;
    }
}

/// Adds typography styles for the igx-tree component.
/// Uses the 'subtitle-1' category from the typographic scale.
/// @group typography
/// @param {Map} $categories [(label: 'subtitle-1')] - The categories from the typographic scale used for type styles.
@mixin tree-typography(
    $categories: (label: 'body-2')
) {
    $text: map.get($categories, 'label');

    %node-content {
        @include type-style($text)
    }
}