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

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

// stylelint-disable max-line-length

/// Generates a base light rating schema.
/// @type Map
/// @prop {Map} label-color [color: ('gray', 900)] - sets the color for the label.
/// @prop {Map} value-label [color: ('gray', 900)] - sets the color for the value label.
/// @prop {Map} symbol-empty-color [color: ('gray', 600)] - sets the idle color for the symbol when it is a plane text.
/// @prop {Map} symbol-full-color [color: ('warn')] - sets the color in selected state for the symbol when it is a plane text.
/// @prop {Function} symbol-empty-filter [grayscale(100%) opacity(50%)] - the filter(s) used for the empty symbol.
/// @prop {Function} symbol-full-filter [grayscale(50%)] - the filter(s) used for the filled symbol.
/// @prop {Map} disabled-label-color [color: ('gray', 400)] - sets the color for the label in disabled state.
/// @prop {Map} disabled-value-label [color: ('gray', 400)] - sets the color for the value in disabled state.
/// @prop {Map} disabled-empty-symbol-color [color: ('gray', 400)] - sets the idle color for the symbol in disabled state when it is a plane text.
/// @prop {Map} disabled-full-symbol-color [color: ('gray', 600)] - sets the color for the symbol in selected/disabled state when it is a plane text.
/// @prop {List} symbol-size [(rem(18px), rem(24px), rem(36px))] - the size of the symbols.
/// @prop {Number} default-size [2] - The default size used for the rating component.
$light-rating: (
    label-color: (
        color: (
            'gray',
            900,
        ),
    ),
    value-label: (
        color: (
            'gray',
            900,
        ),
    ),
    symbol-empty-color: (
        color: (
            'gray',
            600,
        ),
    ),
    symbol-full-color: (
        color: (
            'warn',
        ),
    ),
    symbol-empty-filter: (
        grayscale(100%) opacity(50%),
    ),
    symbol-full-filter: (
        grayscale(50%),
    ),
    disabled-label-color: (
        color: (
            'gray',
            400,
        ),
    ),
    disabled-value-label: (
        color: (
            'gray',
            400,
        ),
    ),
    disabled-empty-symbol-color: (
        color: (
            'gray',
            400,
        ),
    ),
    disabled-full-symbol-color: (
        color: (
            'warn',
            200,
        ),
    ),
    symbol-size: (
        sizable: (
            rem(18px),
            rem(24px),
            rem(36px),
        ),
    ),
    default-size: 2,
    _meta: (
        name: 'rating',
        variant: 'light',
    ),
);

/// Generates a material rating schema.
/// @type Map
/// @prop {Map} value-label [color: ('gray', 700)] - sets the color for the value label.
/// @requires $light-rating
$material-rating: extend(
    $light-rating,
    (
        value-label: (
            color: (
                'gray',
                700,
            ),
        ),
        _meta: (
            theme: 'material',
        ),
    )
);

/// Generates a fluent rating schema.
/// @type Map
/// @prop {Map} symbol-empty-color [color: ('gray', 700)] - sets the idle color for the symbol when it is a plane text.
/// @prop {Map} symbol-full-color [[color: ('warn', 900)] - sets the color in selected state for the symbol when it is a plane text.
/// @prop {Map} disabled-empty-symbol-color [color: ('warn', 100)] - sets the idle color for the symbol in disabled state when it is a plane text.
/// @prop {Map} disabled-full-symbol-color [color: ('warn', 100)] - sets the color for the symbol in selected/disabled state when it is a plane text.
/// @requires $light-rating
$fluent-rating: extend(
    $light-rating,
    (
        symbol-empty-color: (
            color: (
                'gray',
                700,
            ),
        ),
        symbol-full-color: (
            color: (
                'warn',
                900,
            ),
        ),
        disabled-empty-symbol-color: (
            color: (
                'warn',
                100,
            ),
        ),
        disabled-full-symbol-color: (
            color: (
                'warn',
                100,
            ),
        ),
        _meta: (
            theme: 'fluent',
        ),
    )
);

/// Generates a bootstrap rating schema.
/// @type Map
/// @requires $light-rating
$bootstrap-rating: extend(
    $light-rating,
    (
        _meta: (
            theme: 'bootstrap',
        ),
    )
);

/// Generates an indigo rating schema.
/// @type Map
/// @prop {Map} label-color [color: ('gray', 800)] - sets the color for the label.
/// @prop {Map} value-label [color: ('gray', 800)] - sets the color for the value label.
/// @prop {Map} symbol-empty-color [color: ('gray', 600)] - sets the idle color for the symbol when it is a plane text.
/// @prop {Map} symbol-full-color [color: ('warn', 600)] - sets the color in selected state for the symbol when it is a plane text.
/// @prop {Map} disabled-label-color [color: ('gray', 900, .2)] - sets the color for the label in disabled state.
/// @prop {Map} disabled-value-label [color: ('gray', 900, .2)] - sets the color for the value in disabled state.
/// @prop {Map} disabled-empty-symbol-color [color: ('gray', 500, .4)] - sets the idle color for the symbol in disabled state when it is a plane text.
/// @prop {Map} disabled-full-symbol-color [color: ('warn', 300, .4)] - sets the color for the symbol in selected/disabled state when it is a plane text.
/// @prop {List} symbol-size [(rem(18px), rem(24px), rem(30px))] - the size of the symbols.
/// @requires $light-rating
$indigo-rating: extend(
    $light-rating,
    (
        label-color: (
            color: (
                'gray',
                800,
            ),
        ),
        value-label: (
            color: (
                'gray',
                800,
            ),
        ),
        symbol-empty-color: (
            color: (
                'gray',
                600,
            ),
        ),
        symbol-full-color: (
            color: (
                'warn',
                600,
            ),
        ),
        disabled-label-color: (
            color: (
                'gray',
                900,
                0.2,
            ),
        ),
        disabled-value-label: (
            color: (
                'gray',
                900,
                0.2,
            ),
        ),
        disabled-empty-symbol-color: (
            color: (
                'gray',
                500,
                0.4,
            ),
        ),
        disabled-full-symbol-color: (
            color: (
                'warn',
                300,
                0.4,
            ),
        ),
        symbol-size: (
            sizable: (
                rem(18px),
                rem(24px),
                rem(30px),
            ),
        ),
        _meta: (
            theme: 'indigo',
        ),
    )
);