@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>
////

/// Returns a map containing all style properties related to the theming of the tree component.
/// @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.
/// @param {Color} foreground [null] - The color used for the tree node content.
/// @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.
/// @param {Color} foreground-selected [null] - The color used for the content of the selected tree node.
/// @param {Color} background-active [null] - The background color used for the active tree node.
/// @param {Color} foreground-active [null] - The color used for the content of the active tree node.
/// @param {Color} background-active-selected [null] - The background color used for the active selected tree node.
/// @param {Color} foreground-active-selected [null] - The color used for the content of the active selected tree node.
/// @param {Color} background-disabled [null] - The background color used for the tree node in disabled state.
/// @param {Color} foreground-disabled [null] - The color used for the content of the disabled tree node.
/// @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.
/// @param {Color} hover-selected-color [null] - The background color used for the selected tree node on hover.
/// @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
) {
    $name: #{config.variable-prefix() + '-' + 'tree'};
    $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: hsla(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,
        (
            name: $name,
            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,
        )
    );
}