@use '../../../../utils/map' as *;
@use '../../../../typography/functions' as *;
@use '../elevation/time-picker' as *;

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

/// Generates a base light time-picker schema.
/// @type {Map}
/// @prop {Map} text-color [color: ('gray', 900)] - The text color of an open time picker.
/// @prop {Map} hover-text-color [color: ('primary', 500)] - The hover text color of an open time picker.
/// @prop {Map} selected-text-color [color: ('primary', 500)] -  The text color of a selected item in time picker.
/// @prop {Map} active-item-foreground [contrast-color: ('primary', 500)] - The foreground color for current item in focused column inside the time picker.
/// @prop {Map} active-item-background [color: ('primary', 500)] - The background color for current item in focused column inside the time picker.
/// @prop {Map} disabled-text-color [color: ('gray', 400)] - The text color for disabled values.
/// @prop {Color} disabled-item-background [transparent] - The background color for disabled values .
/// @prop {Map} background-color [color: 'surface'] - The time-picker panel background color.
/// @prop {Map} divider-color [color: ('gray', 200)] - The divider color of the time picker.
/// @prop {Color} border-color [transparent] - The border-color of the time picker.
/// @prop {Number} dropdown-elevation [3] - The elevation level, between 0-24, to be used for the time picker in dropdown mode.
/// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the overall shape of the time-picker.
/// @prop {List} time-item-size [(rem(28px), rem(32px), rem(36px))] - The height of the time item.
/// @prop {Number} default-size [2] - the default size.
/// @prop {Map} typography [
///   header-hour: (value: 'h4'),
///   selected-time: (value: 'h5')
/// ] - The typography styles used for the component.
/// @requires {Map} $default-elevation-time-picker
$light-time-picker: extend(
    $default-elevation-time-picker,
    (
        text-color: (
            color: (
                'gray',
                900,
            ),
        ),

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

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

        active-item-foreground: (
            contrast-color: (
                'primary',
                500,
            ),
        ),

        active-item-background: (
            color: (
                'primary',
                500,
            ),
        ),

        disabled-text-color: (
            color: (
                'gray',
                400,
            ),
        ),

        disabled-item-background: transparent,

        background-color: (
            color: 'surface',
        ),

        border-color: transparent,

        divider-color: (
            color: (
                'gray',
                200,
            ),
        ),

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

        time-item-size: (
            sizable: (
                rem(28px),
                rem(32px),
                rem(36px),
            ),
        ),

        default-size: 2,

        typography: (
            header-hour: (
                value: 'h4',
            ),
            selected-time: (
                value: 'h5',
            ),
        ),
    )
);

/// Generates a light material time-picker schema.
/// @type {Map}
/// @prop {Map} header-background [color: ('secondary', 500)] - The header background color of a time picker.
/// @prop {Map} header-hour-text-color [contrast-color: ('secondary', 500)] - The header hour text color of a time picker.
/// @prop {Map} hover-text-color [color: ('secondary', 500)] - The hover text color of an open time picker.
/// @prop {Map} selected-text-color [color: ('secondary', 500)] -  The text color of a selected item in time picker.
/// @prop {Map} active-item-foreground [contrast-color: ('secondary', 500)] - The foreground color for current item in focused column inside the time picker.
/// @prop {Map} active-item-background [color: ('secondary', 500)] - The background color for current item in focused column inside the time picker.
/// @prop {List} active-item-border-radius [(rem(15px), rem(0), rem(20px))] - The border radius used for the highlight of the active item in the time-picker.
/// @requires {Map} $light-time-picker
$material-time-picker: extend(
    $light-time-picker,
    (
        header-background: (
            color: (
                'secondary',
                500,
            ),
        ),

        header-hour-text-color: (
            contrast-color: (
                'secondary',
                500,
            ),
        ),

        hover-text-color: (
            color: (
                'secondary',
                500,
            ),
        ),

        selected-text-color: (
            color: (
                'secondary',
                500,
            ),
        ),

        active-item-foreground: (
            contrast-color: (
                'secondary',
                500,
            ),
        ),

        active-item-background: (
            color: (
                'secondary',
                500,
            ),
        ),

        active-item-border-radius: (
            border-radius: (
                rem(15px),
                rem(0),
                rem(20px),
            ),
        ),

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

/// Generates a fluent time-picker schema.
/// @type {Map}
/// @prop {Map} header-background [color: ('primary', 500)] - The header background color of a time picker.
/// @prop {Map} header-hour-text-color [contrast-color: ('primary', 500)] - The header hour text color of a time picker.
/// @prop {List} border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for the overall shape of the time-picker.
/// @prop {List} active-item-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for the highlight of the active item in the time-picker.
/// @prop {List} time-item-size [(rem(28px), rem(32px), rem(40px))] - The height of the time item.
/// @requires $light-time-picker
$fluent-time-picker: extend(
    $light-time-picker,
    (
        header-background: (
            color: (
                'primary',
                500,
            ),
        ),

        header-hour-text-color: (
            contrast-color: (
                'primary',
                500,
            ),
        ),

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

        active-item-border-radius: (
            border-radius: (
                rem(2px),
                rem(0),
                rem(20px),
            ),
        ),

        time-item-size: (
            sizable: (
                rem(28px),
                rem(32px),
                rem(40px),
            ),
        ),

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

/// Generates a bootstrap time-picker schema.
/// @type {Map}
/// @prop {Map} selected-text-color [color: ('primary', 600)] -  The text color of a selected item in time picker.
/// @prop {Map} hover-text-color [color: ('primary', 600)] - The hover text color of an open time picker.
/// @prop {Map} header-background [color: ('gray', 100)] - The header background color of a time picker.
/// @prop {Map} header-hour-text-color [contrast-color: ('gray', 100)] - The header hour text color of a time picker.
/// @prop {Map} border-color [color: ('gray', 300)] - The border-color of the time picker.
/// @prop {Map} divider-color [color: ('gray', 300)] - The divider color of the time picker.
/// @prop {Map} active-item-background [color: ('primary', 600)] - The background color for current item in focused column inside the time picker.
/// @prop {List} active-item-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the highlight of the active item in the time-picker.
/// @prop {Map} typography [
///   header-hour: (value: 'h4'),
///   selected-time: (value: 'h4')
/// ] - The typography styles used for the component.
/// @requires $light-time-picker
$bootstrap-time-picker: extend(
    $light-time-picker,
    (
        selected-text-color: (
            color: (
                'primary',
                600,
            ),
        ),

        hover-text-color: (
            color: (
                'primary',
                600,
            ),
        ),

        header-background: (
            color: (
                'gray',
                100,
            ),
        ),

        header-hour-text-color: (
            contrast-color: (
                'gray',
                100,
            ),
        ),

        border-color: (
            color: (
                'gray',
                300,
            ),
        ),

        divider-color: (
            color: (
                'gray',
                300,
            ),
        ),

        active-item-background: (
            color: (
                'primary',
                600,
            ),
        ),

        active-item-border-radius: (
            border-radius: (
                rem(4px),
                rem(0),
                rem(20px),
            ),
        ),

        typography: (
            header-hour: (
                value: 'h4',
            ),
            selected-time: (
                value: 'h4',
            ),
        ),

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

/// Generates an indigo time-picker schema.
/// @type {Map}
/// @prop {Map} text-color [color: ('gray', 800)] - The text color of an open time picker.
/// @prop {Map} active-item-foreground [contrast-color: ('primary', 900)] - The foreground color for current item in focused column inside the time picker.
/// @prop {Map} background-color [contrast-color: ('gray', 900)] - The time-picker panel background color.
/// @prop {Map} header-background [contrast-color: ('gray', 900)] - The header background color of a time picker.
/// @prop {Map} header-hour-text-color [color: ('gray', 800)] - The header hour text color of a time picker.
/// @prop {List} border-radius [(rem(6px), rem(0), rem(20px))] - The border radius used for the overall shape of the time-picker.
/// @prop {List} active-item-border-radius [(rem(32px), rem(0), rem(32px))] - The border radius used for the highlight of the active item in the time-picker.
/// @prop {Map} border-color [color: ('gray', 400)] - The border-color of the time picker.
/// @prop {Map} divider-color [color: ('gray', 400)] - The divider color of the time picker.
/// @prop {Map} typography [
///   header-hour: (value: 'h5'),
///   selected-time: (value: 'h6')
/// ] - The typography styles used for the component.
/// @requires $light-time-picker
$indigo-time-picker: extend(
    $light-time-picker,
    $indigo-elevation-time-picker,
    (
        text-color: (
            color: (
                'gray',
                800,
            ),
        ),

        active-item-foreground: (
            contrast-color: (
                'primary',
                900,
            ),
        ),

        background-color: (
            contrast-color: (
                'gray',
                900,
            ),
        ),

        header-background: (
            contrast-color: (
                'gray',
                900,
            ),
        ),

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

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

        active-item-border-radius: (
            border-radius: (
                rem(32px),
                rem(0),
                rem(32px),
            ),
        ),

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

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

        typography: (
            header-hour: (
                value: 'h5',
            ),
            selected-time: (
                value: 'h6',
            ),
        ),

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