@use '../../../../utils/map' as *;
@use '../../../../typography/functions' as *;
@use '../elevation/drop-down' as *;

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

// stylelint-disable max-line-length

/// Generates a light drop-down schema.
/// @type Map
/// @prop {Map} border-color [color: ('gray', 300)] - The border color used for drop-down component.
/// @prop {Map} background-color [color: 'surface'] - The drop-down background color.
/// @prop {Map} header-text-color [color: ('secondary', 500)] - The drop-down header text color.
/// @prop {Map} item-text-color [color: ('gray', 800)] - The drop-down text color.
/// @prop {Map} item-icon-color [color: ('gray', 800)] - The drop-down item icon color.
/// @prop {Map} hover-item-background [color: ('gray', 100)] - The drop-down hover item background color.
/// @prop {Map} hover-item-text-color [color: ('gray', 800)] - The drop-down item hover text color.
/// @prop {Map} hover-item-icon-color [color: ('gray', 800)] - The drop-down item hover icon color.
/// @prop {Map} focused-item-background [color: ('gray', 100)] - The drop-down focused item background color.
/// @prop {Map} focused-item-text-color [color: ('gray', 800)] - The drop-down focused item text color.
/// @prop {Color} focused-item-border-color [transparent] - The drop-down item border color on focus.
/// @prop {Map} selected-item-background [color: ('primary', 500)] - The drop-down selected item background color.
/// @prop {Color} disabled-item-background [transparent] - The drop-down disabled item background color.
/// @prop {Map} disabled-item-text-color [color: ('gray', 500)] - The drop-down disabled item text color.
/// @prop {Number} elevation [3] - The elevation level, between 0-24, to be used for the drop-down shadow.
/// @prop {Number} border-width [0] - The border width used for drop-down component.
/// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for drop-down component.
/// @prop {List} item-border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for the drop-down items.
/// @prop {List} size [(rem(28px), rem(32px), rem(40px))] - The size used for the dropdown item height.
/// @prop {Number} default-size [2] - The default size used for the drop down component.
/// @prop {Map} typography [header: (value: 'overline'), item: (value: 'body-2'), select-item: (value: 'body-2')] - The typography styles used for the component.
/// @requires $default-elevation-drop-down
$light-drop-down: extend(
    $default-elevation-drop-down,
    (
        background-color: (
            color: 'surface',
        ),
        header-text-color: (
            color: (
                'secondary',
                500,
            ),
        ),
        item-text-color: (
            color: (
                'gray',
                800,
            ),
        ),
        item-icon-color: (
            color: (
                'gray',
                800,
            ),
        ),
        hover-item-background: (
            color: (
                'gray',
                100,
            ),
        ),
        hover-item-text-color: (
            color: (
                'gray',
                800,
            ),
        ),
        hover-item-icon-color: (
            color: (
                'gray',
                800,
            ),
        ),
        focused-item-background: (
            color: (
                'gray',
                100,
            ),
        ),
        focused-item-text-color: (
            color: (
                'gray',
                800,
            ),
        ),
        focused-item-border-color: transparent,
        selected-item-background: (
            color: (
                'primary',
                500,
            ),
        ),
        disabled-item-background: transparent,
        disabled-item-text-color: (
            color: (
                'gray',
                500,
            ),
        ),
        border-color: (
            color: (
                'gray',
                300,
            ),
        ),
        border-width: 0,
        border-radius: (
            border-radius: (
                rem(4px),
                rem(0),
                rem(20px),
            ),
        ),
        item-border-radius: (
            border-radius: (
                rem(0),
                rem(0),
                rem(20px),
            ),
        ),
        size: (
            sizable: (
                rem(28px),
                rem(32px),
                rem(40px),
            ),
        ),
        default-size: 2,
        typography: (
            header: (
                value: 'overline',
            ),
            item: (
                value: 'body-2',
            ),
            select-item: (
                value: 'body-2',
            ),
        ),
        _meta: (
            name: 'drop-down',
            variant: 'light',
        ),
    )
);

/// Generates a material drop-down schema.
/// @type Map
/// @prop {Map} selected-item-background [color: ('secondary', 100)] - The drop-down selected item background color.
/// @prop {Map} selected-item-text-color [contrast-color: ('secondary', 100)] - The drop-down selected item text color.
/// @prop {Map} selected-item-icon-color [contrast-color: ('secondary', 100)] - The drop-down selected item icon color.
/// @prop {Map} selected-hover-item-background [color: ('secondary', 200)] - The drop-down selected item hover background color.
/// @prop {Map} selected-hover-item-text-color [contrast-color: ('secondary', 200)] - The drop-down selected item hover text color.
/// @prop {Map} selected-hover-item-icon-color [contrast-color: ('secondary', 200)] - The drop-down selected item hover icon color.
/// @prop {Map} selected-focus-item-background [color: ('secondary', 200)] - The drop-down selected item focus background color.
/// @prop {Map} selected-focus-item-text-color [contrast-color: ('secondary', 200)] - The drop-down selected item focus text color.
/// @requires $light-drop-down
/// @requires $default-elevation-drop-down
$material-drop-down: extend(
    $light-drop-down,
    $default-elevation-drop-down,
    (
        selected-item-background: (
            color: (
                'secondary',
                100,
            ),
        ),
        selected-item-text-color: (
            contrast-color: (
                'secondary',
                100,
            ),
        ),
        selected-item-icon-color: (
            contrast-color: (
                'secondary',
                100,
            ),
        ),
        selected-hover-item-background: (
            color: (
                'secondary',
                200,
            ),
        ),
        selected-hover-item-text-color: (
            contrast-color: (
                'secondary',
                200,
            ),
        ),
        selected-hover-item-icon-color: (
            contrast-color: (
                'secondary',
                200,
            ),
        ),
        selected-focus-item-background: (
            color: (
                'secondary',
                200,
            ),
        ),
        selected-focus-item-text-color: (
            contrast-color: (
                'secondary',
                200,
            ),
        ),
        _meta: (
            theme: 'material',
            variant: 'light',
        ),
    )
);

/// Generates a fluent drop-down schema.
/// @type Map
/// @prop {Map} focused-item-background [color: 'surface'] - The drop-down focused item background color.
/// @prop {Map} selected-item-background [color: ('gray', 200)] - The drop-down selected item background color.
/// @prop {Map} selected-item-text-color [color: ('gray', 900)] - The drop-down selected item text color.
/// @prop {Map} selected-item-icon-color [color: ('gray', 900)] - The drop-down selected item icon color.
/// @prop {Map} selected-hover-item-background [color: ('gray', 200)] - The drop-down selected item hover background color.
/// @prop {Map} selected-hover-item-text-color [color: ('gray', 900)] - The drop-down selected item hover text color.
/// @prop {Map} selected-hover-item-icon-color [color: ('gray', 900)] - The drop-down selected item hover icon color.
/// @prop {Map} selected-focus-item-background [color: ('gray', 200)] - The drop-down selected item focus background color.
/// @prop {Map} selected-focus-item-text-color [color: ('gray', 900)] - The drop-down selected item focus text color.
/// @prop {Map} border-color [color: ('gray', 700)] - The border color used for the drop-down items on focus state.
/// @prop {Number} elevation [3] - The elevation level, between 0-24, to be used for the drop-down shadow.
/// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for drop-down component.
/// @prop {Map} typography [header: (value: 'subtitle-2'), item: (value: 'body-2'), select-item: (value: 'body-2')] - The typography styles used for the component.
/// @requires $light-drop-down
$fluent-drop-down: extend(
    $light-drop-down,
    (
        focused-item-background: (
            color: (
                'surface',
            ),
        ),
        selected-item-background: (
            color: (
                'gray',
                200,
            ),
        ),
        selected-item-text-color: (
            color: (
                'gray',
                900,
            ),
        ),
        selected-item-icon-color: (
            color: (
                'gray',
                900,
            ),
        ),
        selected-hover-item-background: (
            color: (
                'gray',
                200,
            ),
        ),
        selected-hover-item-text-color: (
            color: (
                'gray',
                900,
            ),
        ),
        selected-hover-item-icon-color: (
            color: (
                'gray',
                900,
            ),
        ),
        selected-focus-item-background: (
            color: (
                'gray',
                200,
            ),
        ),
        selected-focus-item-text-color: (
            color: (
                'gray',
                900,
            ),
        ),
        border-color: (
            color: (
                'gray',
                700,
            ),
        ),
        border-radius: (
            border-radius: (
                rem(2px),
                rem(0),
                rem(20px),
            ),
        ),
        typography: (
            header: (
                value: 'subtitle-2',
            ),
            item: (
                value: 'body-2',
            ),
            select-item: (
                value: 'body-2',
            ),
        ),
        _meta: (
            theme: 'fluent',
        ),
    )
);

/// Generates a bootstrap drop-down schema.
/// @type Map
/// @prop {Map} header-text-color [color: ('gray', 700)] - The drop-down header text color.
/// @prop {Map} hover-item-background [color: ('gray', 200)] - The drop-down hover item background color.
/// @prop {Map} focused-item-background [color: ('gray', 200)] - The drop-down focused item background color.
/// @prop {Map} selected-item-text-color [contrast-color('primary', 600)] - The drop-down selected item text color.
/// @prop {Map} selected-item-icon-color [contrast-color('primary', 600)] - The drop-down selected item icon color.
/// @prop {Map} selected-hover-item-background [color: ('primary', 600)] - The drop-down selected item hover background color.
/// @prop {Map} selected-hover-item-text-color [contrast-color('primary', 600)] - The drop-down selected item hover text color.
/// @prop {Map} selected-hover-item-icon-color [contrast-color('primary', 600)] - The drop-down selected item hover icon color.
/// @prop {Map} selected-focus-item-background [color: ('primary', 600)] - The drop-down selected item focus background color.
/// @prop {Map} selected-focus-item-text-color [contrast-color('primary', 600)] - The drop-down selected item focus text color.
/// @prop {Map} disabled-item-text-color [color: ('gray', 400)] - The drop-down disabled item text color.
/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the drop-down shadow.
/// @prop {Number} border-width [1px] - The border width used for drop-down component.
/// @requires $light-drop-down
/// @requires $bootstrap-elevation-drop-down
$bootstrap-drop-down: extend(
    $light-drop-down,
    $bootstrap-elevation-drop-down,
    (
        header-text-color: (
            color: (
                'gray',
                700,
            ),
        ),
        hover-item-background: (
            color: (
                'gray',
                200,
            ),
        ),
        focused-item-background: (
            color: (
                'gray',
                200,
            ),
        ),
        selected-item-text-color: (
            contrast-color: (
                'primary',
                600,
            ),
        ),
        selected-item-icon-color: (
            contrast-color: (
                'primary',
                600,
            ),
        ),
        selected-hover-item-background: (
            color: (
                'primary',
                600,
            ),
        ),
        selected-hover-item-text-color: (
            contrast-color: (
                'primary',
                600,
            ),
        ),
        selected-hover-item-icon-color: (
            contrast-color: (
                'primary',
                600,
            ),
        ),
        selected-focus-item-background: (
            color: (
                'primary',
                600,
            ),
        ),
        selected-focus-item-text-color: (
            contrast-color: (
                'primary',
                600,
            ),
        ),
        disabled-item-text-color: (
            color: (
                'gray',
                400,
            ),
        ),
        border-width: 1px,
        _meta: (
            theme: 'bootstrap',
        ),
    )
);

/// Generates an indigo drop-down schema.
/// @type Map
/// @prop {Map} background-color [contrast-color: ('gray', 900)] - The drop-down background color.
/// @prop {Map} header-text-color [color: ('gray', 600)] - The drop-down header text color.
/// @prop {Map} item-icon-color [color: ('gray', 600)] - The drop-down item icon color.
/// @prop {Map} border-color [color: ('gray', 400)] - The border color used for the drop-down component.
/// @prop {Map} hover-item-background [color: ('gray', 900, .05)] - The drop-down item hover background color.
/// @prop {Map} hover-item-text-color [color: ('gray', 900)] - The drop-down item hover text color.
/// @prop {Map} hover-item-icon-color [color: ('gray', 700)] - The drop-down item hover icon color.
/// @prop {Map} focused-item-background [contrast-color: ('gray', 900)] - The drop-down focused item background color.
/// @prop {Map} focused-item-border-color [color: ('primary', 400)] - The drop-down item border color on focus.
/// @prop {Map} selected-item-background [color: ('primary', 300,  .3)] - The drop-down selected item background color.
/// @prop {Map} selected-item-text-color [color: ('gray', 900)] - The drop-down selected item text color.
/// @prop {Map} selected-item-icon-color [color: ('gray', 700)] - The drop-down selected item icon color.
/// @prop {Map} selected-hover-item-background [color: ('primary', 300, .5)] - The drop-down selected item hover background color.
/// @prop {Map} selected-hover-item-text-color [color: ('gray', 900)] - The drop-down selected item hover text color.
/// @prop {Map} selected-hover-item-icon-color [color: ('gray', 800)] - The drop-down selected item hover icon color.
/// @prop {Map} selected-focus-item-background [color: ('primary', 300, .3)] - The drop-down selected item focus background color.
/// @prop {Map} selected-focus-item-text-color [color: ('gray', 900)] - The drop-down selected item focus text color.
/// @prop {Map} disabled-item-text-color [color: ('gray', 900, .2)] - The drop-down disabled item text color.
/// @prop {Number} elevation [3] - The elevation level, between 0-24, to be used for the badge shadow.
/// @prop {List} item-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for the drop-down items.
/// @prop {Number} border-width [1px] - The border width used for drop-down component.
/// @prop {List} size [(rem(24px), rem(28px), rem(32px))] - The size used for the dropdown item height.
/// @requires $light-drop-down
$indigo-drop-down: extend(
    $light-drop-down,
    (
        background-color: (
            contrast-color: (
                'gray',
                900,
            ),
        ),
        border-color: (
            color: (
                'gray',
                400,
            ),
        ),
        header-text-color: (
            color: (
                'gray',
                600,
            ),
        ),
        item-icon-color: (
            color: (
                'gray',
                600,
            ),
        ),
        hover-item-background: (
            color: (
                'gray',
                900,
                0.05,
            ),
        ),
        hover-item-text-color: (
            color: (
                'gray',
                900,
            ),
        ),
        hover-item-icon-color: (
            color: (
                'gray',
                700,
            ),
        ),
        focused-item-background: (
            contrast-color: (
                'gray',
                900,
            ),
        ),
        focused-item-border-color: (
            color: (
                'primary',
                400,
            ),
        ),
        selected-item-background: (
            color: (
                'primary',
                300,
                0.3,
            ),
        ),
        selected-item-text-color: (
            color: (
                'gray',
                900,
            ),
        ),
        selected-item-icon-color: (
            color: (
                'gray',
                700,
            ),
        ),
        selected-hover-item-background: (
            color: (
                'primary',
                300,
                0.5,
            ),
        ),
        selected-hover-item-text-color: (
            color: (
                'gray',
                900,
            ),
        ),
        selected-hover-item-icon-color: (
            color: (
                'gray',
                800,
            ),
        ),
        selected-focus-item-background: (
            color: (
                'primary',
                300,
                0.3,
            ),
        ),
        selected-focus-item-text-color: (
            color: (
                'gray',
                900,
            ),
        ),
        disabled-item-text-color: (
            color: (
                'gray',
                900,
                0.2,
            ),
        ),
        item-border-radius: (
            border-radius: (
                rem(2px),
                rem(0),
                rem(20px),
            ),
        ),
        border-width: 1px,
        size: (
            sizable: (
                rem(24px),
                rem(28px),
                rem(32px),
            ),
        ),
        _meta: (
            theme: 'indigo',
        ),
    )
);