@use 'sass:map';
@use '../../config';
@use '../../functions' as *;
@use '../../schemas/' as *;
@use '../../../utils/map' as *;
@use '../../../color/functions' as *;
@use '../../../elevations/' as *;

////
/// @package theming
/// @group themes
/// @access public
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
////

/// Tree Theme
///
/// PRIMARY TOKENS:
/// - `$background` — The node background.
/// - `$background-selected` — The selected node background.
/// - `$background-active` — The active node background.
///
/// Derived colors are auto-calculated for contrast.
///
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
/// @param {Color} $background [null] - The background color used for the tree node. PRIMARY - derives all state colors.
/// @param {Color} $foreground [null] - The color used for the tree node content. Auto-derived from background.
/// @param {Color} $icon-color [null] - The color used for the tree node icon.
/// @param {Color} $background-selected [null] - The background color used for the selected tree node. Auto-derived from background.
/// @param {Color} $foreground-selected [null] - The color used for the content of the selected tree node. Auto-derived from background-selected.
/// @param {Color} $background-active [null] - The background color used for the active tree node. Auto-derived from background.
/// @param {Color} $foreground-active [null] - The color used for the content of the active tree node. Auto-derived from background-active.
/// @param {Color} $background-active-selected [null] - The background color used for the active selected tree node. Auto-derived from background-active.
/// @param {Color} $foreground-active-selected [null] - The color used for the content of the active selected tree node. Auto-derived from background-active-selected.
/// @param {Color} $background-disabled [null] - The background color used for the tree node in disabled state. Auto-derived from background.
/// @param {Color} $foreground-disabled [null] - The color used for the content of the disabled tree node. Auto-derived from background-disabled.
/// @param {Color} $drop-area-color [null] - The background color used for the tree node drop aria.
/// @param {Color} $border-color [null] - The outline shadow color used for tree node in focus state.
/// @param {Color} $hover-color [null] - The background color used for the tree node on hover. Auto-derived from background.
/// @param {Color} $hover-selected-color [null] - The background color used for the selected tree node on hover. Auto-derived from background-selected.
/// @requires $light-material-schema
///
/// @example scss - Change the tree background
///   $my-tree-theme: tree-theme($background: magenta);
///   // Pass the theme to the css-vars() mixin
///   @include css-vars($my-tree-theme);
@function tree-theme(
    $schema: $light-material-schema,
    $background: null,
    $background-selected: null,
    $background-active: null,
    $background-active-selected: null,
    $background-disabled: null,
    $foreground: null,
    $foreground-selected: null,
    $foreground-active: null,
    $foreground-active-selected: null,
    $foreground-disabled: null,
    $icon-color: null,
    $drop-area-color: null,
    $border-color: null,
    $hover-color: null,
    $hover-selected-color: null,
    $size: null
) {
    $selector: (#{config.element-prefix() + '-' + 'tree-node'}, #{config.element-prefix() + '-' + 'tree-item'});
    $tree-schema: ();

    @if map.has-key($schema, 'tree') {
        $tree-schema: map.get($schema, 'tree');
    } @else {
        $tree-schema: $schema;
    }

    $theme: digest-schema($tree-schema);

    @if not($foreground) and $background {
        $foreground: adaptive-contrast(var(--background));
    }

    @if not($background-selected) and $background {
        $background-selected: dynamic-shade(var(--background));
    }

    @if not($hover-color) and $background {
        $hover-color: hsl(from adaptive-contrast(var(--background)) h s l / 0.1);
    }

    @if not($hover-selected-color) and $background-selected {
        $hover-selected-color: dynamic-shade(var(--background-selected));
    }

    @if not($foreground-selected) and $background-selected {
        $foreground-selected: adaptive-contrast(var(--background-selected));
    }

    @if not($background-active) and $background {
        $background-active: dynamic-shade(var(--background));
    }

    @if not($foreground-active) and $background-active {
        $foreground-active: adaptive-contrast(var(--background-active));
    }

    @if not($background-active-selected) and $background-active {
        $background-active-selected: dynamic-shade(var(--background-active));
    }

    @if not($foreground-active-selected) and $background-active-selected {
        $foreground-active-selected: adaptive-contrast(var(--background-active-selected));
    }

    @if not($background-disabled) and $background {
        $background-disabled: color-mix(in hsl, var(--background), transparent 50%);
    }

    @if not($foreground-disabled) and $background-disabled {
        $foreground-disabled: adaptive-contrast(var(--background-disabled));
    }

    @return extend(
        $theme,
        (
            selector: $selector,
            background: $background,
            foreground: $foreground,
            icon-color: $icon-color,
            background-selected: $background-selected,
            foreground-selected: $foreground-selected,
            background-active: $background-active,
            foreground-active: $foreground-active,
            background-active-selected: $background-active-selected,
            foreground-active-selected: $foreground-active-selected,
            background-disabled: $background-disabled,
            foreground-disabled: $foreground-disabled,
            drop-area-color: $drop-area-color,
            border-color: $border-color,
            hover-color: $hover-color,
            hover-selected-color: $hover-selected-color,
            size: $size,
        )
    );
}