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

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

/// Generates a base light navdrawer schema.
/// @type Map
/// @prop {Map} background [color: 'surface'] - The navigation drawer background color.
/// @prop {Map} item-disabled-text-color [color: ('gray', 400)] - The item's disabled text color.
/// @prop {Map} item-disabled-icon-color [color: ('gray', 400)] - The item's disabled icon color.
/// @prop {Map} elevation [16] - The elevation level, between 0-24, to be used for the drawer.
/// @prop {List} border-radius [(rem(0), rem(0), rem(36px))] - The border radius used for the navdrawer component.
/// @requires $default-elevation-navdrawer
$light-navdrawer: extend(
    $default-elevation-navdrawer,
    (
        background: (
            color: 'surface',
        ),
        item-disabled-text-color: (
            color: (
                'gray',
                400,
            ),
        ),
        item-disabled-icon-color: (
            color: (
                'gray',
                400,
            ),
        ),
        border-radius: (
            border-radius: (
                rem(0),
                rem(0),
                rem(36px),
            ),
        ),
        _meta: (
            name: 'nav-drawer',
            variant: 'light',
        ),
    )
);

/// Generates a material navdrawer schema.
/// @type Map
/// @prop {List} item-border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for the navdrawer items
/// @prop {Map} item-hover-icon-color [color: ('gray', 900)] - The item's hover icon color.
/// @prop {Map} item-hover-text-color [color: ('gray', 900)] - The item's hover text color.
/// @prop {Map} item-hover-background [color: ('gray', 200)] - The item's hover background color.
/// @prop {Map} item-text-color [color: ('gray', 900)] - The item's idle text color.
/// @prop {Map} item-active-background [color: ('primary', 500, .12)] - The item's active background color.
/// @prop {Map} item-active-icon-color [color: ('primary', 800)] - The item's icon active color.
/// @prop {Map} item-active-text-color [color: ('primary', 800)] - The item's active text color.
/// @prop {Map} border-color [color: ('gray', 300)] - The navigation drawer right border color.
/// @prop {Map} item-icon-color [ color: ('gray', 700)] - The item's icon color.
/// @prop {Map} item-header-text-color [color: ('gray', 700)] - The header's idle text color.
/// @prop {Map} item-disabled-text-color [color: ('gray', 500)] - The item's disabled text color.
/// @prop {Map} typography [item: (value: 'subtitle-2'), header: (value: 'subtitle-1')] - The typography styles used for the component.
/// @requires $light-navdrawer
$material-navdrawer: extend(
    $light-navdrawer,
    (
        item-border-radius: (
            border-radius: (
                rem(4px),
                rem(0),
                rem(24px),
            ),
        ),
        item-hover-icon-color: (
            color: (
                'gray',
                900,
            ),
        ),
        item-hover-text-color: (
            color: (
                'gray',
                900,
            ),
        ),
        item-hover-background: (
            color: (
                'gray',
                200,
            ),
        ),
        item-text-color: (
            color: (
                'gray',
                900,
            ),
        ),
        item-active-background: (
            color: (
                'primary',
                500,
                0.12,
            ),
        ),
        item-active-icon-color: (
            color: (
                'primary',
                800,
            ),
        ),
        item-active-text-color: (
            color: (
                'primary',
                800,
            ),
        ),
        border-color: (
            color: (
                'gray',
                300,
            ),
        ),
        item-icon-color: (
            color: (
                'gray',
                700,
            ),
        ),
        item-header-text-color: (
            color: (
                'gray',
                700,
            ),
        ),
        item-disabled-text-color: (
            color: (
                'gray',
                500,
            ),
        ),
        typography: (
            item: (
                value: 'subtitle-2',
            ),
            header: (
                value: 'subtitle-1',
            ),
        ),
        _meta: (
            theme: 'material',
        ),
    )
);

/// Generates a fluent navdrawer schema.
/// @type Map
/// @prop {Number} item-border-radius [0] - The border radius used for the navdrawer items.
/// @prop {Map} item-hover-icon-color [color: ('primary', 600)] - The item's hover icon color.
/// @prop {Map} item-hover-text-color [color: ('gray', 800)] - The item's hover text color.
/// @prop {Map} item-hover-background [color: ('gray', 100)] - The item's hover background color.
/// @prop {Map} item-text-color [color: ('gray', 800)] - The item's idle text color.
/// @prop {Map} item-active-background [color: ('gray', 200)] - The item's active background color.
/// @prop {Map} item-active-icon-color [color: ('primary', 700)] - The item's icon active color.
/// @prop {Map} item-active-text-color [color: ('gray', 900)] - The item's active text color.
/// @prop {Map} border-color [color: ('gray', 200)] - The navigation drawer right border color.
/// @prop {Map} item-icon-color [ color: ('primary', 500)] - The item's icon color.
/// @prop {Map} item-header-text-color [color: ('gray', 800)] - The header's idle text color.
/// @prop {Map} typography [ item: (value: 'body-2'), header: (value: 'subtitle-1')] - The typography styles used for the component.
/// @requires $light-navdrawer
$fluent-navdrawer: extend(
    $light-navdrawer,
    (
        item-border-radius: 0,
        item-hover-icon-color: (
            color: (
                'primary',
                600,
            ),
        ),
        item-hover-text-color: (
            color: (
                'gray',
                800,
            ),
        ),
        item-hover-background: (
            color: (
                'gray',
                100,
            ),
        ),
        item-text-color: (
            color: (
                'gray',
                800,
            ),
        ),
        item-active-background: (
            color: (
                'gray',
                200,
            ),
        ),
        item-active-icon-color: (
            color: (
                'primary',
                700,
            ),
        ),
        item-active-text-color: (
            color: (
                'gray',
                900,
            ),
        ),
        border-color: (
            color: (
                'gray',
                200,
            ),
        ),
        item-icon-color: (
            color: (
                'primary',
                500,
            ),
        ),
        item-header-text-color: (
            color: (
                'gray',
                800,
            ),
        ),
        typography: (
            item: (
                value: 'body-2',
            ),
            header: (
                value: 'subtitle-1',
            ),
        ),
        _meta: (
            theme: 'fluent',
        ),
    )
);

/// Generates a bootstrap navdrawer schema.
/// @type Map
/// @prop {List} item-border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for the navdrawer items
/// @prop {Map} item-hover-icon-color [color: ('gray', 900)] - The item's hover icon color.
/// @prop {Map} item-hover-text-color [color: ('gray', 900)] - The item's hover text color.
/// @prop {Map} item-hover-background [color: ('gray', 200, .8)] - The item's hover background color.
/// @prop {Map} item-text-color [color: ('gray', 900)] - The item's idle text color.
/// @prop {Map} item-active-background [color: ('primary', 500)] - The item's active background color.
/// @prop {Map} item-active-icon-color [contrast-color: ('primary', 900)] - The item's icon active color.
/// @prop {Map} item-active-text-color [contrast-color: ('primary', 900)] - The item's active text color.
/// @prop {Map} border-color [color: ('gray', 300)] - The navigation drawer right border color.
/// @prop {Map} item-icon-color [ color: ('gray', 900)] - The item's icon color.
/// @prop {Map} item-header-text-color [color: ('gray', 900)] - The header's idle text color.
/// @prop {Map} typography [item: (value: 'body-2'), header: (value: 'caption')] - The typography styles used for the component.
/// @requires $light-navdrawer
$bootstrap-navdrawer: extend(
    $light-navdrawer,
    (
        item-border-radius: (
            border-radius: (
                rem(4px),
                rem(0),
                rem(24px),
            ),
        ),
        item-hover-icon-color: (
            color: (
                'gray',
                900,
            ),
        ),
        item-hover-text-color: (
            color: (
                'gray',
                900,
            ),
        ),
        item-hover-background: (
            color: (
                'gray',
                200,
                0.8,
            ),
        ),
        item-text-color: (
            color: (
                'gray',
                900,
            ),
        ),
        item-active-background: (
            color: (
                'primary',
                500,
            ),
        ),
        item-active-icon-color: (
            contrast-color: (
                'primary',
                900,
            ),
        ),
        item-active-text-color: (
            contrast-color: (
                'primary',
                900,
            ),
        ),
        border-color: (
            color: (
                'gray',
                300,
            ),
        ),
        item-icon-color: (
            color: (
                'gray',
                900,
            ),
        ),
        item-header-text-color: (
            color: (
                'gray',
                900,
            ),
        ),
        typography: (
            item: (
                value: 'body-2',
            ),
            header: (
                value: 'caption',
            ),
        ),
        _meta: (
            theme: 'bootstrap',
        ),
    )
);

/// Generates an indigo navdrawer schema.
/// @type Map
/// @prop {Map} item-header-text-color [color: ('gray', 600)] - The header's idle text color.
/// @prop {Map} item-text-color [color: ('gray', 800)] - The item's idle text color.
/// @prop {Map} item-icon-color [color: ('gray', 600)] - The item's icon color.
/// @prop {Map} item-active-text-color [color: ('primary', 500)] - The item's active text color.
/// @prop {Map} item-active-background [color: ('primary', 300, .3)] - The item's active background color.
/// @prop {Map} item-active-icon-color [color: ('primary', 500)] - The item's icon active color.
/// @prop {Map} item-hover-background [color: ('gray', 900, 0.05)] - The item's hover background color.
/// @prop {Map} item-hover-text-color [color: ('gray', 900)] - The item's hover text color.
/// @prop {Map} item-hover-icon-color [color: ('gray', 700)] - The item's hover icon color.
/// @prop {Map} item-disabled-text-color [color: ('gray', 900, 0.2)] - The item's disabled text color.
/// @prop {Map} item-disabled-icon-color [color: ('gray', 900, 0.2)] - The item's disabled icon color.
/// @prop {Map} elevation [0] - The elevation level, between 0-24, to be used for the drawer.
/// @prop {Map} border-color [color: ('gray', 300)] - The navigation drawer right border color.
/// @prop {List} item-border-radius [(rem(4px), rem(0), rem(4px))] - The border radius used for the navdrawer items.
/// @prop {Map} typography [item: (value: 'subtitle-2'), header: (value: 'overline')] - The typography styles used for the component.
/// @requires $light-navdrawer
$indigo-navdrawer: extend(
    $light-navdrawer,
    (
        border-color: (
            color: (
                'gray',
                300,
            ),
        ),

        item-header-text-color: (
            color: (
                'gray',
                600,
            ),
        ),

        item-text-color: (
            color: (
                'gray',
                800,
            ),
        ),

        item-icon-color: (
            color: (
                'gray',
                600,
            ),
        ),

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

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

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

        item-hover-background: (
            color: (
                'gray',
                900,
                0.05,
            ),
        ),

        item-hover-text-color: (
            color: (
                'gray',
                900,
            ),
        ),

        item-hover-icon-color: (
            color: (
                'gray',
                700,
            ),
        ),

        item-disabled-text-color: (
            color: (
                'gray',
                900,
                0.2,
            ),
        ),
        item-disabled-icon-color: (
            color: (
                'gray',
                900,
                0.2,
            ),
        ),

        item-border-radius: (
            border-radius: (
                rem(4px),
                rem(0),
                rem(4px),
            ),
        ),

        typography: (
            item: (
                value: 'subtitle-2',
            ),
            header: (
                value: 'overline',
            ),
        ),
        _meta: (
            theme: 'indigo',
        ),
    )
);