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

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

/// Generates a light card schema.
/// @type Map
/// @prop {Map} background [color: 'surface'] - The card background color.
/// @prop {Map} header-text-color [color: ('gray', 900)] - The text color of the card title.
/// @prop {Map} subtitle-text-color [color: ('gray', 700)] - The text color of the card subtitle.
/// @prop {Map} content-text-color [color: ('gray', 700)] - The text color of the card content.
/// @prop {Map} actions-text-color [color: ('primary', 500)] - The text color of the card buttons.
/// @prop {Map} outline-color [color: ('gray', 400)] - The outline color of an outlined type card.
/// @prop {Number} resting-elevation [4] - The elevation level, between 0-24, to be used for the resting state.
/// @prop {Number} hover-elevation [6] - The elevation level, between 0-24, to be used for the hover state.
/// @prop {List} border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for card.
/// @prop {Number} default-size [2] - The default size used for the card component.
/// @requires $default-elevation-card
$light-card: extend(
    $default-elevation-card,
    (
        background: (
            color: 'surface',
        ),

        header-text-color: (
            color: (
                'gray',
                900,
            ),
        ),

        subtitle-text-color: (
            color: (
                'gray',
                700,
            ),
        ),

        content-text-color: (
            color: (
                'gray',
                700,
            ),
        ),

        actions-text-color: (
            color: (
                'primary',
                500,
            ),
        ),

        outline-color: (
            color: (
                'gray',
                400,
            ),
        ),

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

        default-size: 2,

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

/// Generates a material card schema.
/// @type Map
/// @prop {Map} subtitle-text-color [color: ('gray', 900)] - The text color of the card subtitle.
/// @prop {Map} outline-color [color: ('gray', 400, .54)] - The outline color of an outlined type card.
/// @prop {Map} actions-text-color [color: ('gray', 900)] - The text color of the card buttons.
/// @prop {Map} typography [title: (value: 'h6'), small: (value: 'subtitle-2'), subtitle: (value: 'subtitle-2'), content: (value: 'body-2')] - The typography styles used for the component.
/// @requires $light-card
$material-card: extend(
    $light-card,
    (
        outline-color: (
            color: (
                'gray',
                400,
                0.54,
            ),
        ),

        subtitle-text-color: (
            color: (
                'gray',
                900,
            ),
        ),

        actions-text-color: (
            color: (
                'gray',
                900,
            ),
        ),

        typography: (
            title: (
                value: 'h6',

                small: (
                    value: 'subtitle-2',
                ),
            ),
            subtitle: (
                value: 'subtitle-2',
            ),
            content: (
                value: 'body-2',
            ),
        ),

        _meta: (
            theme: 'material',
        ),
    )
);

/// Generates a fluent card schema.
/// @type Map
/// @prop {Map} outline-color [color: ('gray', 200)] - The outline color of an outlined type card.
/// @prop {List} border-radius [(rem(0px), rem(0), rem(24px))] - The border radius used for card.
/// @prop {Map} typography [title: (value: 'subtitle-1'), small: (value: 'subtitle-2'), subtitle: (value: 'body-2'), content: (value: 'body-2')] - The typography styles used for the component.
/// @requires $light-card
$fluent-card: extend(
    $light-card,
    (
        outline-color: (
            color: (
                'gray',
                200,
            ),
        ),

        border-radius: (
            border-radius: (
                rem(0),
                rem(0),
                rem(24px),
            ),
        ),

        typography: (
            title: (
                value: 'subtitle-1',

                small: (
                    value: 'subtitle-2',
                ),
            ),
            subtitle: (
                value: 'body-2',
            ),
            content: (
                value: 'body-2',
            ),
        ),

        _meta: (
            theme: 'fluent',
        ),
    )
);

/// Generates a bootstrap card schema.
/// @type Map
/// @prop {Map} subtitle-text-color [color: ('gray', 800)] - The text color of the card subtitle.
/// @prop {Map} typography [title: (value: 'h5'), small: (value: 'subtitle-2'), subtitle: (value: 'body-1'), content: (value: 'body-1')] - The typography styles used for the component.
/// @requires $light-card
$bootstrap-card: extend(
    $light-card,
    (
        subtitle-text-color: (
            color: (
                'gray',
                800,
            ),
        ),

        typography: (
            title: (
                value: 'h5',

                small: (
                    value: 'subtitle-2',
                ),
            ),
            subtitle: (
                value: 'body-1',
            ),
            content: (
                value: 'body-1',
            ),
        ),

        _meta: (
            theme: 'bootstrap',
        ),
    )
);

/// Generates an indigo card schema.
/// @type Map
/// @prop {Map} background [contrast-color: ('gray', 900)] - The card background color.
/// @prop {Map} header-text-color [color: ('gray', 800)] - The text color of the card title.
/// @prop {Map} actions-text-color [color: ('gray', 600)] - The text color of the card buttons.
/// @prop {List} border-radius [(rem(6px), rem(0), rem(24px))] - The border radius used for card.
/// @prop {Map} typography [title: (value: 'h6'), small: (value: 'body-2'), subtitle: (value: 'body-2'), content: (value: 'body-2')] - The typography styles used for the component.
/// @requires $light-card
$indigo-card: extend(
    $light-card,
    (
        background: (
            contrast-color: (
                'gray',
                900,
            ),
        ),

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

        actions-text-color: (
            color: (
                'gray',
                600,
            ),
        ),

        border-radius: (
            border-radius: (
                rem(6px),
                rem(0),
                rem(24px),
            ),
        ),

        typography: (
            title: (
                value: 'h6',

                small: (
                    value: 'body-2',
                ),
            ),
            subtitle: (
                value: 'body-2',
            ),
            content: (
                value: 'body-2',
            ),
        ),

        _meta: (
            theme: 'indigo',
        ),
    )
);