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

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

// stylelint-disable max-line-length

/// Generates a base light tree schema.
/// @type Map
/// @prop {Map} background [ color: ('surface')] - The background color used for the tree node.
/// @prop {Map} background-selected [color: ('primary')] - The background color used for the selected tree node.
/// @prop {Map} background-active [color: ('gray', 200)] - The background color used for the active tree node.
/// @prop {Map} background-disabled [color: ('surface')] - The background color used for the tree node in disabled state.
/// @prop {Map} foreground [contrast-color: ('surface')] - The color used for the tree node content.
/// @prop {Map} foreground-active [contrast-color: ('gray', 200)] - The color used for the content in active state of the tree node.
/// @prop {Map} foreground-disabled [color: ('gray', 500)] - The color used for the content of the disabled tree node.
/// @prop {Map} icon-color [contrast-color: ('surface')] - The color used for the tree node icon.
/// @prop {Map} drop-area-color [color: ('secondary')] - The background color used for the tree node drop aria.
/// @prop {Map} hover-color [color: ('gray', 900, .1)] - The background color used for the tree node on hover.
/// @prop {Map} hover-selected-color [color: ('gray', 900, .1)] - The background color used for the selected tree node on hover.
/// @prop {List} size [(rem(32px), rem(40px), rem(50px))] - The size used for the tree node.
/// @prop {Number} default-size [2] - The default size used for the tree component.
/// @prop {Map} typography [label: (value: 'body-2')] - The typography styles used for the component.
$light-tree: (
    background: (
        color: (
            'surface',
        ),
    ),
    foreground: (
        contrast-color: (
            'surface',
        ),
    ),
    icon-color: (
        contrast-color: (
            'surface',
        ),
    ),
    background-selected: (
        color: (
            'primary',
        ),
    ),
    background-active: (
        color: (
            'gray',
            200,
        ),
    ),
    foreground-active: (
        contrast-color: (
            'gray',
            200,
        ),
    ),
    background-disabled: (
        color: (
            'surface',
        ),
    ),
    foreground-disabled: (
        color: (
            'gray',
            500,
        ),
    ),
    drop-area-color: (
        color: (
            'secondary',
        ),
    ),
    hover-color: (
        color: (
            'gray',
            900,
            0.1,
        ),
    ),
    hover-selected-color: (
        color: (
            'gray',
            900,
            0.1,
        ),
    ),
    size: (
        sizable: (
            rem(32px),
            rem(40px),
            rem(50px),
        ),
    ),
    default-size: 2,
    typography: (
        label: (
            value: 'body-2',
        ),
    ),
    _meta: (
        name: 'tree',
        variant: 'light',
    ),
);

/// Generates a light material tree schema.
/// @type Map
/// @prop {Map} background-selected [color: ('secondary', 200)] - The background color used for the selected tree node.
/// @prop {Map} foreground-selected [contrast-color: ('secondary', 200)] - The color used for the content of the selected tree node.
/// @prop {Map} background-active-selected [color: ('secondary', 300)] - The background color used for the active selected tree node.
/// @prop {Map} foreground-active-selected [contrast-color: ('secondary', 300)] - The color used for the content of the active selected tree node.
/// @prop {Map} border-color [color: ('secondary')] - The outline shadow color used for tree node in focus state.
/// @requires $light-tree
$material-tree: extend(
    $light-tree,
    (
        background-selected: (
            color: (
                'secondary',
                200,
            ),
        ),
        foreground-selected: (
            contrast-color: (
                'secondary',
                200,
            ),
        ),
        background-active-selected: (
            color: (
                'secondary',
                300,
            ),
        ),
        foreground-active-selected: (
            contrast-color: (
                'secondary',
                300,
            ),
        ),
        border-color: (
            color: (
                'secondary',
            ),
        ),
        _meta: (
            theme: 'material',
        ),
    )
);

/// Generates a light fluent tree schema.
/// @type Map
/// @prop {Map} background-selected [color: ('gray', 200)] - The background color used for the selected tree node.
/// @prop {Map} foreground-selected [contrast-color: ('gray', 200)] - The color used for the content of the selected tree node.
/// @prop {Map} background-active-selected [color: ('gray', 300)] - The background color used for the active selected tree node.
/// @prop {Map} foreground-active-selected [contrast-color: ('gray', 300)] - The color used for the content of the active selected tree node.
/// @prop {Map} border-color [color: ('gray', 800)] - The outline shadow color used for tree node in focus state.
/// @requires $light-tree
$fluent-tree: extend(
    $light-tree,
    (
        background-selected: (
            color: (
                'gray',
                200,
            ),
        ),
        foreground-selected: (
            contrast-color: (
                'gray',
                200,
            ),
        ),
        background-active-selected: (
            color: (
                'gray',
                300,
            ),
        ),
        foreground-active-selected: (
            contrast-color: (
                'gray',
                300,
            ),
        ),
        border-color: (
            color: (
                'gray',
                800,
            ),
        ),
        _meta: (
            theme: 'fluent',
        ),
    )
);

/// Generates a light bootstrap tree schema.
/// @type Map
/// @prop {Map} foreground-active [color: ('primary', 800)] - The color used for the content in active state of the tree node.
/// @prop {Map} foreground-selected [contrast-color: ('primary', 600)] - The color used for the content of the selected tree node.
/// @prop {Map} background-active-selected [color: ('primary', 600)] - The background color used for the active selected tree node.
/// @prop {Map} foreground-active-selected [contrast-color: ('primary', 600)] - The color used for the content of the active selected tree node.
/// @prop {Map} border-color [color: ('primary', 200)] - The outline shadow color used for tree node in focus state.
/// @requires $light-tree
$bootstrap-tree: extend(
    $light-tree,
    (
        foreground-active: (
            color: (
                'primary',
                800,
            ),
        ),
        foreground-selected: (
            contrast-color: (
                'primary',
                600,
            ),
        ),
        background-active-selected: (
            color: (
                'primary',
                600,
            ),
        ),
        foreground-active-selected: (
            contrast-color: (
                'primary',
                600,
            ),
        ),
        border-color: (
            color: (
                'primary',
                200,
            ),
        ),
        _meta: (
            theme: 'bootstrap',
        ),
    )
);

/// Generates a light indigo tree schema.
/// @type Map
/// @prop {Color} background [transparent] - The background color used for the tree node.
/// @prop {Color} background-selected [transparent] - The background color used for the selected tree node.
/// @prop {Map} background-active [color: ('primary', 300, 0.3)] - The background color used for the active tree node.
/// @prop {Map} background-active-selected [color: ('primary', 300, 0.3)] - The background color used for the active selected tree node.
/// @prop {Color} background-disabled [transparent] - The background color used for the tree node in disabled state.
/// @prop {Map} foreground [color: ('gray', 800)] - The color used for the tree node content.
/// @prop {Map} foreground-active [color: ('gray', 900)] - The color used for the content in active state of the tree node.
/// @prop {Map} foreground-selected [color: ('gray', 800)] - The color used for the content of the selected tree node.
/// @prop {Map} foreground-active-selected [color: ('gray', 900)] - The color used for the content of the active selected tree node.
/// @prop {Map} foreground-disabled [color: ('gray', 900, 0.2)] - The color used for the content of the disabled tree node.
/// @prop {Map} icon-color [color: ('gray', 600)] - The color used for the tree node icon.
/// @prop {Map} border-color [color: ('primary', 400)] - The outline shadow color used for tree node in focus state.
/// @prop {Map} hover-color [color: ('gray', 900, .05)] - The background color used for the tree node on hover.
/// @prop {Map} hover-selected-color [color: ('primary', 300, 0.5)] - The background color used for the selected tree node on hover.
/// @prop {List} size [(rem(24px), rem(28px), rem(32px))] - The size used for the tree node.
/// @requires $light-tree
$indigo-tree: extend(
    $light-tree,
    (
        background: transparent,
        foreground: (
            color: (
                'gray',
                800,
            ),
        ),
        background-selected: transparent,
        foreground-selected: (
            color: (
                'gray',
                800,
            ),
        ),
        background-active: (
            color: (
                'primary',
                300,
                0.3,
            ),
        ),
        foreground-active: (
            color: (
                'gray',
                900,
            ),
        ),
        background-disabled: transparent,
        foreground-disabled: (
            color: (
                'gray',
                900,
                0.2,
            ),
        ),
        background-active-selected: (
            color: (
                'primary',
                300,
                0.3,
            ),
        ),
        foreground-active-selected: (
            color: (
                'gray',
                900,
            ),
        ),
        icon-color: (
            color: (
                'gray',
                600,
            ),
        ),
        border-color: (
            color: (
                'primary',
                400,
            ),
        ),
        hover-color: (
            color: (
                'gray',
                900,
                0.05,
            ),
        ),
        hover-selected-color: (
            color: (
                'primary',
                300,
                0.5,
            ),
        ),
        size: (
            sizable: (
                rem(24px),
                rem(28px),
                rem(32px),
            ),
        ),
        _meta: (
            theme: 'indigo',
        ),
    )
);