@use 'sass:map';
@use '../../config';
@use '../../functions' as *;
@use '../../schemas/' as *;
@use '../../../utils/map' as *;
@use '../../../color/functions' as *;
@use '../../../elevations/' as *;

////
/// @package theming
/// @group themes
/// @access public
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
////

/// Time Picker Theme
///
/// PRIMARY TOKENS:
/// - `$background-color` — The picker panel background.
/// - `$selected-text-color` or `$active-item-background` - The selected/active accent color. These derive from each other and from header-background.
/// - `$header-background` — The header background.
///
/// Derived colors are auto-calculated for contrast.
///
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
/// @param {Color} $text-color [null] - The text color of a open time picker. Auto-derived from background-color.
/// @param {Color} $hover-text-color [null] - The hover text color of a open time picker. Auto-derived from text-color.
/// @param {Color} $selected-text-color [null] -  The text color of a selected item in time picker. Auto-derived from background-color or active-item-background.
/// @param {Color} $active-item-background [null] - The background color for current item in focused column inside the time picker. Auto-derived from selected-text-color or background-color.
/// @param {Color} $active-item-foreground [null] - The foreground color for current item in focused column inside the time picker. Auto-derived from active-item-background.
/// @param {Color} $disabled-text-color [null] - The text color for disabled values. Auto-derived from disabled-item-background.
/// @param {Color} $disabled-item-background [null] - The background color for disabled values.
/// @param {Color} $header-background [null] - The header background color of a time picker. Auto-derived from selected-text-color or background-color.
/// @param {Color} $header-hour-text-color [null] - The header hour text color of a time picker. Auto-derived from header-background.
/// @param {Color} $background-color [null] - The time-picker panel background color. PRIMARY - derives text, selected, active, border colors.
/// @param {Number} $time-item-size [null] - The height of the time item.
/// @param {Color} $divider-color [null] - The color for the actions area divider. Auto-derived from border-color.
/// @param {Color} $border-color [null] - The border color around the time picker. Auto-derived from background-color.
/// @param {List} $modal-shadow [null] - The custom shadow to be used for the time picker in modal mode.
/// @param {List} $dropdown-shadow [null] - The custom shadow to be used for the time picker in dropdown mode.
/// @param {List} $border-radius [null] - The border radius used for the outline of the picker.
/// @param {List} $active-item-border-radius [null] - The border radius used for the outline of the currently active item (hours, minutes, AM/PM).
/// @requires $light-material-schema
/// @example scss - Change the background and text colors in  time picker
///   $my-time-picker-theme: time-picker-theme(
///     $text-color: white,
///     $background-color: black
///   );
///   // Pass the theme to the css-vars() mixin
///   @include css-vars($my-time-picker-theme);
@function time-picker-theme(
    $schema: $light-material-schema,

    $border-radius: null,
    $active-item-border-radius: null,

    $text-color: null,
    $hover-text-color: null,
    $selected-text-color: null,
    $active-item-background: null,
    $active-item-foreground: null,
    $disabled-text-color: null,
    $disabled-item-background: null,
    $header-background: null,
    $header-hour-text-color: null,
    $background-color: null,
    $modal-shadow: null,
    $dropdown-shadow: null,
    $border-color: null,
    $divider-color: null,
    $time-item-size: null
) {
    $selector: (
        #{config.element-prefix() + '-' + 'time-picker'},
        #{'.' + config.element-prefix() + '-' + 'time-picker'}
    );
    $time-picker-schema: ();

    @if map.has-key($schema, 'time-picker') {
        $time-picker-schema: map.get($schema, 'time-picker');
    } @else {
        $time-picker-schema: $schema;
    }

    $theme: digest-schema($time-picker-schema);

    @if not($text-color) and $background-color {
        $text-color: hsl(from adaptive-contrast(var(--background-color)) h s l / 0.7);
    }

    @if not($hover-text-color) and $text-color {
        $hover-text-color: hsl(from var(--text-color) h s l / 1);
    }

    @if not($header-background) and $selected-text-color {
        $header-background: var(--selected-text-color);
    }

    @if not($header-background) and $background-color {
        $header-background: var(--background-color);
    }

    @if not($header-hour-text-color) and $header-background {
        $header-hour-text-color: adaptive-contrast(var(--header-background));
    }

    @if not($selected-text-color) and $active-item-background {
        $selected-text-color: var(--active-item-background);
    }

    @if not($active-item-background) and $selected-text-color {
        $active-item-background: var(--selected-text-color);
    }

    @if not($active-item-background) and $background-color {
        $active-item-background: hsl(from adaptive-contrast(var(--background-color)) h s l / 0.5);
    }

    @if not($active-item-foreground) and $active-item-background {
        $active-item-foreground: adaptive-contrast(var(--active-item-background));
    }

    @if not($selected-text-color) and $background-color {
        $selected-text-color: adaptive-contrast(var(--background-color));
    }

    @if not($disabled-text-color) and $disabled-item-background {
        $disabled-text-color: hsl(from adaptive-contrast(var(--disabled-item-background)) h s l / 0.6);
    }

    @if not($border-color) and $background-color {
        $border-color: hsl(from adaptive-contrast(var(--background-color)) h s l / 0.6);
    }

    @if not($divider-color) and $border-color {
        $divider-color: var(--border-color);
    }

    @if not($modal-shadow) {
        $elevation: map.get($time-picker-schema, 'modal-elevation');
        $modal-shadow: elevation($elevation);
    }

    @if not($dropdown-shadow) {
        $elevation: map.get($time-picker-schema, 'dropdown-elevation');
        $dropdown-shadow: elevation($elevation);
    }

    @return extend(
        $theme,
        (
            selector: $selector,
            text-color: $text-color,
            hover-text-color: $hover-text-color,
            selected-text-color: $selected-text-color,
            active-item-foreground: $active-item-foreground,
            active-item-background: $active-item-background,
            disabled-text-color: $disabled-text-color,
            disabled-item-background: $disabled-item-background,
            header-background: $header-background,
            header-hour-text-color: $header-hour-text-color,
            background-color: $background-color,
            modal-elevation: $modal-shadow,
            dropdown-elevation: $dropdown-shadow,
            border-radius: $border-radius,
            border-color: $border-color,
            divider-color: $divider-color,
            time-item-size: $time-item-size,
            active-item-border-radius: $active-item-border-radius,
        )
    );
}