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

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

/// Generates a light dialog schema.
/// @type Map
/// @prop {Map} background [color: 'surface'] - The dialog background color.
/// @prop {Map} title-color [color: ('gray', 900)] - The dialog title text color.
/// @prop {Map} message-color [color: ('gray', 600)] - The dialog message text color.
/// @prop {Color} border-color [transparent] - The border color for dialog component.
/// @prop {Map} backdrop [color: ('gray', 500, .54)] - The dialog backdrop color.
/// @prop {Number} elevation [24] - The elevation level, between 0-24, to be used for the dialog.
/// @prop {List} border-radius [(rem(4px), rem(0), rem(36px))] - The border radius used for dialog.
/// @prop {Number} default-size [2] - The default size used for the dialog component.
/// @prop {Map} typography [title: (value: 'h5'), content: (value: 'body-1')] - The typography styles used for the component.
/// @requires $default-elevation-dialog
$light-dialog: extend(
    $default-elevation-dialog,
    (
        background: (
            color: 'surface',
        ),

        title-color: (
            color: (
                'gray',
                900,
            ),
        ),

        message-color: (
            color: (
                'gray',
                600,
            ),
        ),

        border-color: transparent,

        backdrop: (
            color: (
                'gray',
                500,
                0.54,
            ),
        ),

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

        default-size: 2,

        typography: (
            title: (
                value: 'h5',
            ),
            content: (
                value: 'body-1',
            ),
        ),

        _meta: (
            name: 'dialog',
            variant: 'light',
        ),
    )
);

/// Generates a material dialog schema.
/// @type Map
/// @prop {Map} typography [title: (value: 'h6'), content: (value: 'body-1')] - The typography styles used for the component.
/// @requires $light-dialog
$material-dialog: extend(
    $light-dialog,
    (
        typography: (
            title: (
                value: 'h6',
            ),
            content: (
                value: 'body-1',
            ),
        ),
        _meta: (
            theme: 'material',
        ),
    )
);

/// Generates a fluent dialog schema.
/// @type Map
/// @prop {List} border-radius [(rem(2px), rem(0), rem(36px))] - The border radius used for dialog.
/// @prop {Map} message-color [color: ('gray', 700)] - The dialog message text color.
/// @prop {Map} typography [title: (value: 'h6'), content: (value: 'body-2')] - The typography styles used for the component.
/// @requires $light-dialog
$fluent-dialog: extend(
    $light-dialog,
    (
        border-radius: (
            border-radius: (
                rem(2px),
                rem(0),
                rem(36px),
            ),
        ),
        message-color: (
            color: (
                'gray',
                700,
            ),
        ),
        typography: (
            title: (
                value: 'h6',
            ),
            content: (
                value: 'body-2',
            ),
        ),
        _meta: (
            theme: 'fluent',
        ),
    )
);

/// Generates a bootstrap dialog schema.
/// @type Map
/// @prop {Map} border-color [color: ('gray', 300)] - The border color for dialog component.
/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the dialog.
/// @requires $light-dialog
/// @requires $bootstrap-elevation-dialog
$bootstrap-dialog: extend(
    $light-dialog,
    $bootstrap-elevation-dialog,
    (
        border-color: (
            color: (
                'gray',
                300,
            ),
        ),
        _meta: (
            theme: 'bootstrap',
        ),
    )
);

/// Generates an indigo dialog schema.
/// @type Map
/// @prop {Map} message-color [color: ('gray', 700)] - The dialog message text color.
/// @prop {List} border-radius [(rem(10px), rem(0), rem(36px))] - The border radius used for dialog.
/// @requires $light-dialog
$indigo-dialog: extend(
    $light-dialog,
    (
        background: (
            contrast-color: (
                'gray',
                900,
            ),
        ),
        message-color: (
            color: (
                'gray',
                700,
            ),
        ),

        border-radius: (
            border-radius: (
                rem(10px),
                rem(0),
                rem(36px),
            ),
        ),
        _meta: (
            theme: 'indigo',
        ),
    )
);