@use '../../../../utils/map' as *;
@use '../light/navdrawer' as *;

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

/// Generates a base dark navdrawer schema.
/// @type Map
/// @prop {Map} item-disabled-text-color [color: ('gray', 200)] - The item's disabled text color.
/// @prop {Map} item-disabled-icon-color [color: ('gray', 200)] - The item's disabled icon color.
/// @requires $material-navdrawer
$dark-base-navdrawer: extend(
    $light-navdrawer,
    (
        item-disabled-text-color: (
            color: (
                'gray',
                200,
            ),
        ),
        item-disabled-icon-color: (
            color: (
                'gray',
                200,
            ),
        ),
        _meta: (
            name: 'nav-drawer',
            variant: 'dark',
        ),
    )
);

/// Generates a dark material navdrawer schema.
/// @type Map
/// @prop {Map} item-active-icon-color [color: ('primary', 500)] - The item's icon active color.
/// @prop {Map} item-active-text-color [color: ('primary', 500)] - The item's active text color.
/// @prop {Map} item-disabled-text-color [color: ('gray', 300)] - The item's disabled text color.
/// @requires $material-navdrawer
$dark-material-navdrawer: extend(
    $material-navdrawer,
    $dark-base-navdrawer,
    (
        item-active-icon-color: (
            color: (
                'primary',
                500,
            ),
        ),
        item-active-text-color: (
            color: (
                'primary',
                500,
            ),
        ),
        item-disabled-text-color: (
            color: (
                'gray',
                300,
            ),
        ),
    )
);

/// Generates a dark fluent navdrawer schema.
/// @type Map
/// @prop {Map} item-hover-icon-color [color: ('primary', 100)] - The item's hover icon color.
/// @prop {Map} item-icon-color [color: ('primary', 200)] - The item's icon color.
/// @prop {Map} item-hover-background [color: ('gray', 200, .12)] - The item's hover background color.
/// @prop {Map} item-active-text-color [color: ('primary', 200)] - The item's active text color.
/// @prop {Map} item-active-icon-color [color: ('primary', 100)] - The item's icon active color.
/// @prop {Map} item-active-background [color: ('primary', 300, .12)] - The item's active background color.
/// @requires $fluent-navdrawer
$dark-fluent-navdrawer: extend(
    $fluent-navdrawer,
    $dark-base-navdrawer,
    (
        item-hover-icon-color: (
            color: (
                'primary',
                100,
            ),
        ),
        item-icon-color: (
            color: (
                'primary',
                200,
            ),
        ),
        item-hover-background: (
            color: (
                'gray',
                200,
                0.12,
            ),
        ),
        item-active-icon-color: (
            color: (
                'primary',
                50,
            ),
        ),
        item-active-background: (
            color: (
                'gray',
                300,
                0.12,
            ),
        ),
    )
);

/// Generates a dark bootstrap navdrawer schema.
/// @type Map
/// @prop {Map} item-hover-background [color: ('gray', 200, .8)] - The item's hover background color.
/// @requires $bootstrap-navdrawer
$dark-bootstrap-navdrawer: extend(
    $bootstrap-navdrawer,
    $dark-base-navdrawer,
    (
        item-hover-background: (
            color: (
                'gray',
                200,
                0.8,
            ),
        ),
    )
);

/// Generates a dark indigo navdrawer schema.
/// @type Map
/// @prop {Map} item-header-text-color [contrast-color: ('gray', 50, 0.6)] - The header's idle text color.
/// @prop {Map} item-text-color [contrast-color: ('gray', 50, 0.8)] - The item's idle text color.
/// @prop {Map} item-icon-color [contrast-color: ('gray', 50, 0.6)] - The item's icon color.
/// @prop {Map} item-active-text-color [color: ('primary', 100)] - The item's active text color.
/// @prop {Map} item-active-background [color: ('primary', 400, .3)] - The item's active background color.
/// @prop {Map} item-active-icon-color [color: ('primary', 200)] - The item's icon active color.
/// @prop {Map} item-hover-background [contrast-color: ('gray', 50, 0.1)] - The item's hover background color.
/// @prop {Map} item-hover-text-color [contrast-color: ('gray', 50)] - The item's hover text color.
/// @prop {Map} item-hover-icon-color [contrast-color: ('gray', 50, 0.8)] - The item's hover icon color.
/// @prop {Map} item-disabled-text-color [contrast-color: ('gray', 50, 0.2)] - The item's disabled text color.
/// @prop {Map} item-disabled-icon-color [contrast-color: ('gray', 50, 0.2)] - The item's disabled icon color.
/// @prop {Map} border-color [color: ('gray', 100)] - The navigation drawer right border color.
/// @requires $indigo-navdrawer
$dark-indigo-navdrawer: extend(
    $indigo-navdrawer,
    $dark-base-navdrawer,
    (
        border-color: (
            color: (
                'gray',
                100,
            ),
        ),

        item-header-text-color: (
            contrast-color: (
                'gray',
                50,
                0.6,
            ),
        ),

        item-text-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),

        item-icon-color: (
            contrast-color: (
                'gray',
                50,
                0.6,
            ),
        ),

        item-active-background: (
            color: (
                'primary',
                400,
                0.3,
            ),
        ),

        item-active-text-color: (
            color: (
                'primary',
                100,
            ),
        ),

        item-active-icon-color: (
            color: (
                'primary',
                200,
            ),
        ),

        item-hover-background: (
            contrast-color: (
                'gray',
                50,
                0.1,
            ),
        ),

        item-hover-text-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),

        item-hover-icon-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),

        item-disabled-text-color: (
            contrast-color: (
                'gray',
                50,
                0.2,
            ),
        ),

        item-disabled-icon-color: (
            contrast-color: (
                'gray',
                50,
                0.2,
            ),
        ),
    )
);