@use '../../../../utils/map' as *;
@use '../../../../typography/functions' as *;
@use '../light/tree' as *;

////
/// @package theming
/// @group schemas
/// @access public
////

// stylelint-disable max-line-length

/// Generates a base dark tree schema.
/// @type Map
/// @prop {Map} background-active [color: ('gray', 100)] - The background color used for the active tree node.
/// @prop {Map} foreground-active [color: ('gray', 900)] - The color used for the content in active state of the tree node.
/// @prop {Map} hover-color [color: ('gray', 200, .5)] - The background color used for the tree node on hover.
/// @prop {Map} hover-selected-color [color: ('gray', 50, .1)] - The background color used for the selected tree node on hover.
$base-dark-tree: (
    background-active: (
        color: (
            'gray',
            100,
        ),
    ),
    foreground-active: (
        color: (
            'gray',
            900,
        ),
    ),
    hover-color: (
        color: (
            'gray',
            200,
            0.5,
        ),
    ),
    hover-selected-color: (
        color: (
            'gray',
            50,
            0.1,
        ),
    ),
    _meta: (
        name: 'tree',
        variant: 'dark',
    ),
);

/// Generates a dark material tree schema.
/// @type Map
/// @requires $material-tree
/// @requires $base-dark-tree
$dark-material-tree: extend($material-tree, $base-dark-tree);

/// Generates a dark fluent tree schema.
/// @type Map
/// @prop {Map} background-selected [color: ('gray', 100)] - The background color used for the selected tree node.
/// @prop {Map} foreground-selected [color: ('gray', 900)] - The color used for the content of the selected tree node.
/// @prop {Map} background-active-selected [color: ('gray', 200)] - The background color used for the active selected tree node.
/// @prop {Map} foreground-active-selected [color: ('gray', 900)] - The color used for the content of the active selected tree node.
/// @requires $fluent-tree
/// @requires $base-dark-tree
$dark-fluent-tree: extend(
    $fluent-tree,
    $base-dark-tree,
    (
        background-selected: (
            color: (
                'gray',
                100,
            ),
        ),
        foreground-selected: (
            color: (
                'gray',
                900,
            ),
        ),
        background-active-selected: (
            color: (
                'gray',
                200,
            ),
        ),
        foreground-active-selected: (
            color: (
                'gray',
                900,
            ),
        ),
    )
);

/// Generates a dark bootstrap tree schema.
/// @type Map
/// @prop {Map} hover-color [color: ('gray', 500, .3)] - The background color used for the tree node on hover.
/// @prop {Map} foreground-active [contrast-color: ('surface')] - The color used for the content in active state of the tree node.
/// @requires $bootstrap-tree
/// @requires $base-dark-tree
$dark-bootstrap-tree: extend(
    $bootstrap-tree,
    $base-dark-tree,
    (
        hover-color: (
            color: (
                'gray',
                500,
                0.3,
            ),
        ),
        foreground-active: (
            contrast-color: (
                'surface',
            ),
        ),
    )
);

/// Generates a dark indigo tree schema.
/// @type Map
/// @prop {Map} background-active [color: ('primary', 400, 0.3)] - The background color used for the active tree node.
/// @prop {Map} background-active-selected [color: ('primary', 400, 0.3)] - The background color used for the active selected tree node.
/// @prop {Map} foreground [contrast-color: ('gray', 50, 0.8)] - The color used for the tree node content.
/// @prop {Map} foreground-active [contrast-color: ('gray', 50)] - The color used for the content in active state of the tree node.
/// @prop {Map} foreground-selected [contrast-color: ('gray', 50, 0.8)] - The color used for the content of the selected tree node.
/// @prop {Map} foreground-active-selected [contrast-color: ('gray', 50)] - The color used for the content of the active selected tree node.
/// @prop {Map} foreground-disabled [contrast-color: ('gray', 50, 0.2)] - The color used for the content of the disabled tree node.
/// @prop {Map} icon-color [contrast-color: ('gray', 50, 0.8)] - The color used for the tree node icon.
/// @prop {Map} hover-color [contrast-color: ('gray', 50, .1)] - The background color used for the tree node on hover.
/// @prop {Map} hover-selected-color [color: ('primary', 400, 0.5)] - The background color used for the selected tree node on hover.
/// @requires $indigo-tree
/// @requires $base-dark-tree
$dark-indigo-tree: extend(
    $indigo-tree,
    $base-dark-tree,
    (
        foreground: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),
        foreground-selected: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),
        background-active: (
            color: (
                'primary',
                400,
                0.3,
            ),
        ),
        foreground-active: (
            contrast-color: (
                'gray',
                50,
            ),
        ),
        background-active-selected: (
            color: (
                'primary',
                400,
                0.3,
            ),
        ),
        foreground-active-selected: (
            contrast-color: (
                'gray',
                50,
            ),
        ),
        foreground-disabled: (
            contrast-color: (
                'gray',
                50,
                0.2,
            ),
        ),
        icon-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),
        hover-color: (
            contrast-color: (
                'gray',
                50,
                0.1,
            ),
        ),
        hover-selected-color: (
            color: (
                'primary',
                400,
                0.5,
            ),
        ),
    )
);