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

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

// stylelint-disable max-line-length

/// Generates a base light slider schema.
/// @type {Map}
/// @prop {Map} track-color [color: ('secondary', 500)] - The color of the track.
/// @prop {Color} track-step-color [white] - The color of the track steps.
/// @prop {Number} track-step-size [rem(3px)] - The size of the track steps.
/// @prop {Map} thumb-disabled-border-color [color: ('gray', 400)] - The thumb border color when it's disabled.
/// @prop {Map} label-background-color [color: ('gray', 700)] - The background color of the bubble label.
/// @prop {Map} label-text-color [contrast-color: ('gray', 700)] - The text color of the bubble label.
/// @prop {Map} tick-label-color [color: ('gray', 500)] - The color of the tick label.
/// @prop {Map} tick-color [color: ('gray', 500)] - The background-color of the tick.
/// @prop {Map} typography [
///   ticks-label: (value: 'caption'),
///   thumb-label: (value: 'caption')
/// ] - The typography styles used for the component.
$light-slider: (
    track-color: (
        color: (
            'secondary',
            500,
        ),
    ),
    track-step-color: white,
    track-step-size: rem(3px),
    thumb-disabled-border-color: (
        color: (
            'gray',
            400,
        ),
    ),
    label-background-color: (
        color: (
            'gray',
            700,
        ),
    ),
    label-text-color: (
        contrast-color: (
            'gray',
            700,
        ),
    ),
    tick-color: (
        color: (
            'gray',
            500,
        ),
    ),
    tick-label-color: (
        color: (
            'gray',
            500,
        ),
    ),
    typography: (
        ticks-label: (
            value: 'caption',
        ),
        thumb-label: (
            value: 'caption',
        ),
    ),
);

/// Generates a material slider schema.
/// @type {Map}
/// @prop {Map} thumb-color [color: ('secondary', 500)] - The color of the thumb.
/// @prop {Map} thumb-border-color [color: ('secondary', 500)] - The thumb border color.
/// @prop {Map} thumb-border-hover-color [color: ('secondary', 500)] - The thumb border color when hovered.
/// @prop {Map} thumb-border-focus-color [color: ('secondary', 500)] - The thumb border color when focused.
/// @prop {Color} thumb-focus-color [transparent] - The focus outline color of the thumb.
/// @prop {Map} track-step-color [color: ('secondary', 200)] - The color of the track steps.
/// @prop {Map} track-hover-color [color: ('secondary', 400)] - The color of the track on hover.
/// @prop {Map} disabled-thumb-color [color: ('gray', 400)] - The thumb color when its disabled.
/// @prop {Map} base-track-color [color: ('secondary', 500, .24)] - The base background color of the track.
/// @prop {Map} base-track-hover-color [color: ('secondary', 500, .24)] - The base background color of the track on hover.
/// @prop {Map} disabled-base-track-color [color: ('gray', 200)] - The base background color of the track when is disabled.
/// @prop {Map} disabled-fill-track-color [color: ('gray', 400)] - The background color of the fill track when is disabled.
/// @requires {Map} $light-slider
$material-slider: extend(
    $light-slider,
    (
        thumb-color: (
            color: (
                'secondary',
                500,
            ),
        ),
        thumb-border-color: (
            color: (
                'secondary',
                500,
            ),
        ),
        thumb-border-hover-color: (
            color: (
                'secondary',
                500,
            ),
        ),
        thumb-border-focus-color: (
            color: (
                'secondary',
                500,
            ),
        ),
        track-step-color: (
            color: (
                'secondary',
                200,
            ),
        ),
        track-hover-color: (
            color: (
                'secondary',
                400,
            ),
        ),
        thumb-focus-color: transparent,
        disabled-thumb-color: (
            color: (
                'gray',
                400,
            ),
        ),
        base-track-color: (
            color: (
                'secondary',
                500,
                0.24,
            ),
        ),
        base-track-hover-color: (
            color: (
                'secondary',
                500,
                0.24,
            ),
        ),
        disabled-base-track-color: (
            color: (
                'gray',
                200,
            ),
        ),
        disabled-fill-track-color: (
            color: (
                'gray',
                400,
            ),
        ),
        _meta: (
            theme: 'material',
            variant: 'light',
        ),
    )
);

/// Generates a fluent slider schema.
/// @type {Map}
/// @prop {Map} track-color [color: ('gray', 800)] - The color of the track.
/// @prop {Map} track-hover-color [color: ('primary', 500)] - The color of the track on hover.
/// @prop {Map} thumb-color [color: ('surface', 500)] - The color of the thumb.
/// @prop {Map} thumb-border-color [color: ('gray', 700)] - The thumb border color.
/// @prop {Map} thumb-border-hover-color [color: ('gray', 700)] - The thumb border color when hovered.
/// @prop {Map} thumb-border-focus-color [color: ('gray', 700)] - The thumb border color when focused.
/// @prop {Map} thumb-focus-color [color: ('primary', 700)] - The focus outline color of the thumb.
/// @prop {Map} disabled-thumb-color [color: ('surface', 500)] - The thumb color when its disabled.
/// @prop {Map} label-background-color [color: ('primary', 500)] - The background color of the bubble label.
/// @prop {Map} base-track-color [color: ('gray', 600)] - The base background color of the track.
/// @prop {Map} base-track-hover-color [color: ('gray', 600)] - The base background color of the track on hover.
/// @prop {Map} disabled-base-track-color [color: ('gray', 100)] - The base background color of the track when is disabled.
/// @prop {Map} disabled-fill-track-color [color: ('gray', 500)] - The background color of the fill track when is disabled.
/// @requires {Map} $light-slider
$fluent-slider: extend(
    $light-slider,
    (
        track-color: (
            color: (
                'gray',
                800,
            ),
        ),
        track-hover-color: (
            color: (
                'primary',
                500,
            ),
        ),
        thumb-color: (
            color: (
                'surface',
                500,
            ),
        ),
        thumb-border-color: (
            color: (
                'gray',
                700,
            ),
        ),
        thumb-border-hover-color: (
            color: (
                'gray',
                700,
            ),
        ),
        thumb-border-focus-color: (
            color: (
                'gray',
                700,
            ),
        ),
        thumb-focus-color: (
            color: (
                'primary',
                700,
            ),
        ),
        disabled-thumb-color: (
            color: (
                'surface',
                500,
            ),
        ),
        base-track-color: (
            color: (
                'gray',
                600,
            ),
        ),
        base-track-hover-color: (
            color: (
                'gray',
                600,
            ),
        ),
        disabled-base-track-color: (
            color: (
                'gray',
                100,
            ),
        ),
        disabled-fill-track-color: (
            color: (
                'gray',
                500,
            ),
        ),
        label-background-color: (
            color: (
                'primary',
                500,
            ),
        ),
        _meta: (
            theme: 'fluent',
            variant: 'light',
        ),
    )
);

/// Generates a bootstrap slider schema.
/// @type {Map}
/// @prop {Map} base-track-color [color: ('secondary', 500, .24)] - The base background color of the track.
/// @prop {Map} base-track-hover-color [color: ('secondary', 500, .24)] - The base background color of the track on hover.
/// @prop {Map} label-background-color [color: ('gray', 700)] - The background color of the bubble label.
/// @prop {Map} thumb-color [color: ('primary', 500)] - The color of the thumb.
/// @prop {Map} thumb-border-color [color: ('primary', 500)] - The thumb border color.
/// @prop {Map} thumb-border-hover-color [color: ('primary', 500)] - The thumb border color when hovered.
/// @prop {Map} thumb-border-focus-color [color: ('surface', 500)] - The thumb border color when focused.
/// @prop {Map} thumb-focus-color [color: ('primary', 200)] - The focus outline color of the thumb.
/// @prop {Map} disabled-thumb-color [color: ('gray', 400)] - The thumb color when its disabled.
/// @prop {Map} disabled-base-track-color [color: ('gray', 200)] - The base background color of the track when is disabled.
/// @requires {Map} $light-slider
$bootstrap-slider: extend(
    $fluent-slider,
    (
        base-track-color: (
            color: (
                'secondary',
                500,
                0.24,
            ),
        ),
        base-track-hover-color: (
            color: (
                'secondary',
                500,
                0.24,
            ),
        ),
        label-background-color: (
            color: (
                'gray',
                700,
            ),
        ),
        thumb-color: (
            color: (
                'primary',
                500,
            ),
        ),
        thumb-border-color: (
            color: (
                'primary',
                500,
            ),
        ),
        thumb-border-hover-color: (
            color: (
                'primary',
                500,
            ),
        ),
        thumb-border-focus-color: (
            color: (
                'surface',
                500,
            ),
        ),
        thumb-focus-color: (
            color: (
                'primary',
                200,
            ),
        ),
        disabled-thumb-color: (
            color: (
                'gray',
                400,
            ),
        ),
        disabled-base-track-color: (
            color: (
                'gray',
                200,
            ),
        ),
        _meta: (
            theme: 'bootstrap',
            variant: 'light',
        ),
    )
);

/// Generates an indigo slider schema.
/// @type {Map}
/// @prop {Map} track-step-color [color: ('gray', 900, 0.4)] - The color of the track steps.
/// @prop {Number} track-step-size [rem(2px)] - The size of the track steps.
/// @prop {Map} base-track-color [color: ('gray', 400)] - The base background color of the track.
/// @prop {Map} base-track-hover-color [color: ('gray', 500)] - The base background color of the track on hover.
/// @prop {Map} track-color [color: ('primary', 500)] - The color of the track.
/// @prop {Map} track-hover-color [color: ('primary', 400)] - The color of the track on hover.
/// @prop {Map} thumb-color [color: ('gray', 50)] - The color of the thumb.
/// @prop {Map} thumb-border-color [color: ('primary', 500)] - The thumb border color.
/// @prop {Map} thumb-border-hover-color [color: ('primary', 400)] - The thumb border color when hovered.
/// @prop {Map} thumb-border-focus-color [color: ('primary', 500)] - The thumb border color when focused.
/// @prop {Map} thumb-focus-color [color: ('primary', 400, 0.5)] - The focus outline color of the thumb.
/// @prop {Map} tick-color [color: ('gray', 300)] - The background-color of the tick.
/// @prop {Map} tick-label-color [color: ('gray', 600)] - The color of the tick label.
/// @prop {Map} label-background-color [color: ('gray', 600)] - The background color of the bubble label.
/// @prop {Map} label-text-color [contrast-color: ('gray', 600)] - The text color of the bubble label.
/// @prop {Map} disabled-thumb-color [color: ('gray', 50)] - The thumb color when it's disabled.
/// @prop {Map} thumb-disabled-border-color [color: ('primary', 50)] - The thumb border color when it's disabled.
/// @prop {Map} disabled-base-track-color [color: ('gray', 900, 0.15)] - The base background color of the track when is disabled.
/// @prop {Map} disabled-fill-track-color [color: ('primary', 50)] - The background color of the fill track when is disabled.
/// @prop {Map} typography [
///   ticks-label: (value: 'body-2'),
///   thumb-label: (value: 'subtitle-2')
/// ] - The typography styles used for the component.
/// @requires {Map} $light-slider
$indigo-slider: extend(
    $light-slider,
    (
        track-step-color: (
            color: (
                'gray',
                900,
                0.4,
            ),
        ),
        track-step-size: rem(2px),
        base-track-color: (
            color: (
                'gray',
                400,
            ),
        ),
        base-track-hover-color: (
            color: (
                'gray',
                500,
            ),
        ),
        track-color: (
            color: (
                'primary',
                500,
            ),
        ),
        track-hover-color: (
            color: (
                'primary',
                400,
            ),
        ),
        thumb-color: (
            color: (
                'gray',
                50,
            ),
        ),
        thumb-border-color: (
            color: (
                'primary',
                500,
            ),
        ),
        thumb-border-hover-color: (
            color: (
                'primary',
                400,
            ),
        ),
        thumb-border-focus-color: (
            color: (
                'primary',
                500,
            ),
        ),
        thumb-focus-color: (
            color: (
                'primary',
                400,
                0.5,
            ),
        ),
        tick-color: (
            color: (
                'gray',
                300,
            ),
        ),
        tick-label-color: (
            color: (
                'gray',
                600,
            ),
        ),
        label-background-color: (
            color: (
                'gray',
                600,
            ),
        ),
        label-text-color: (
            contrast-color: (
                'gray',
                600,
            ),
        ),
        disabled-thumb-color: (
            color: (
                'gray',
                50,
            ),
        ),
        thumb-disabled-border-color: (
            color: (
                'primary',
                50,
            ),
        ),
        disabled-base-track-color: (
            color: (
                'gray',
                900,
                0.15,
            ),
        ),
        disabled-fill-track-color: (
            color: (
                'primary',
                50,
            ),
        ),
        typography: (
            ticks-label: (
                value: 'body-2',
            ),
            thumb-label: (
                value: 'subtitle-2',
            ),
        ),
        _meta: (
            theme: 'indigo',
            variant: 'light',
        ),
    )
);