@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>
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
////

/// Combo Theme
///
/// PRIMARY TOKENS:
/// - `$toggle-button-background` — The toggle button background.
/// - `$empty-list-background` — The empty list background.
/// - `$clear-button-background-focus` — The clear button focus background.
///
/// Toggle button colors cascade from toggle-button-background through focus and disabled states.
///
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
/// @param {Color} $search-separator-border-color [null] - The combo search box separator color.
/// @param {Color} $empty-list-placeholder-color [null] - The combo placeholder text color. Auto-derived from empty-list-background.
/// @param {Color} $empty-list-background [null] - The combo list background color. PRIMARY - derives empty-list-placeholder-color.
/// @param {Color} $toggle-button-background [null] - The combo toggle button background color. PRIMARY - derives all toggle button colors.
/// @param {Color} $toggle-button-background-focus [null] - The combo toggle button background color when the combo is focused in material box variant. Auto-derived from toggle-button-background.
/// @param {Color} $toggle-button-background-focus--border [null] - The combo toggle button background color when the combo is focused in material border variant. Auto-derived from toggle-button-background.
/// @param {Color} $toggle-button-background-disabled [null] - The combo toggle button background color when the combo is disabled. Auto-derived from toggle-button-background.
/// @param {Color} $toggle-button-foreground [null] - The combo toggle button foreground color. Auto-derived from toggle-button-background.
/// @param {Color} $toggle-button-foreground-focus [null] - The combo toggle button foreground color when the combo is focused. Auto-derived from toggle-button-background-focus.
/// @param {Color} $toggle-button-foreground-disabled [null] - The combo toggle button foreground color when the combo is disabled. Auto-derived from toggle-button-background.
/// @param {Color} $toggle-button-foreground-filled [null] - The combo toggle button foreground color when the combo is filled. Auto-derived from toggle-button-background.
/// @param {Color} $clear-button-background [null] - The combo clear button background color.
/// @param {Color} $clear-button-background-focus [null] - The combo clear button background color when the combo is focused. PRIMARY for clear button focus.
/// @param {Color} $clear-button-foreground [null] - The combo clear button foreground color.
/// @param {Color} $clear-button-foreground-focus [null] - The combo clear button foreground color when the combo is focused. Auto-derived from clear-button-background-focus.
/// @requires $light-material-schema
/// @example scss - Change the combo empty list background
///   $my-combo-theme: igx-checkbox-theme($empty-list-background);
///   // Pass the theme to the css-vars mixin
///   @include css-vars($my-combo-theme);
@function combo-theme(
    $schema: $light-material-schema,
    $search-separator-border-color: null,
    $empty-list-placeholder-color: null,
    $empty-list-background: null,
    $toggle-button-background: null,
    $toggle-button-background-focus: null,
    $toggle-button-background-disabled: null,
    $toggle-button-foreground: null,
    $toggle-button-foreground-focus: null,
    $toggle-button-foreground-disabled: null,
    $toggle-button-background-focus--border: null,
    $clear-button-background: null,
    $clear-button-background-focus: null,
    $clear-button-foreground: null,
    $clear-button-foreground-focus: null,
    $toggle-button-foreground-filled: null
) {
    $selector: (
        #{config.element-prefix() + '-' + 'combo'},
        #{config.element-prefix() + '-' + 'simple-combo'},
        '.igx-drop-down__list'
    );
    $combo-schema: ();

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

    $theme: digest-schema($combo-schema);
    $variant: map.get($theme, '_meta', 'theme');

    @if not($empty-list-placeholder-color) and $empty-list-background {
        $empty-list-placeholder-color: adaptive-contrast(var(--empty-list-background));
    }

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

    @if $variant == 'material' {
        @if not($toggle-button-background-focus) and $toggle-button-background {
            $toggle-button-background-focus: dynamic-shade(var(--toggle-button-background));
        }
    } @else {
        @if not($toggle-button-background-focus) and $toggle-button-background {
            $toggle-button-background-focus: var(--toggle-button-background);
        }
    }

    @if not($toggle-button-foreground-focus) and $toggle-button-background-focus {
        $toggle-button-foreground-focus: adaptive-contrast(var(--toggle-button-background-focus));
    }

    @if not($toggle-button-background-focus--border) and $toggle-button-background {
        $toggle-button-background-focus--border: var(--toggle-button-background);
    }

    @if not($toggle-button-foreground-filled) and $toggle-button-background {
        $toggle-button-foreground-filled: adaptive-contrast(var(--toggle-button-background));
    }

    @if not($toggle-button-background-disabled) and $toggle-button-background {
        $toggle-button-background-disabled: hsl(from var(--toggle-button-background) h s l / 0.3);
    }

    @if not($toggle-button-foreground-disabled) and $toggle-button-background {
        $toggle-button-foreground-disabled: hsl(from adaptive-contrast(var(--toggle-button-background)) h s l / 0.7);
    }

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

    @if not($clear-button-foreground-focus) and $clear-button-foreground {
        $clear-button-foreground-focus: var(--clear-button-foreground);
    }

    @if not($clear-button-foreground-focus) and $clear-button-background-focus {
        $clear-button-foreground-focus: adaptive-contrast(var(--clear-button-background-focus));
    }

    @return extend(
        $theme,
        (
            selector: $selector,
            search-separator-border-color: $search-separator-border-color,
            empty-list-placeholder-color: $empty-list-placeholder-color,
            empty-list-background: $empty-list-background,
            toggle-button-background: $toggle-button-background,
            toggle-button-background-focus: $toggle-button-background-focus,
            toggle-button-background-disabled: $toggle-button-background-disabled,
            toggle-button-foreground: $toggle-button-foreground,
            toggle-button-foreground-focus: $toggle-button-foreground-focus,
            toggle-button-foreground-disabled: $toggle-button-foreground-disabled,
            toggle-button-foreground-filled: $toggle-button-foreground-filled,
            toggle-button-background-focus--border: $toggle-button-background-focus--border,
            clear-button-background: $clear-button-background,
            clear-button-background-focus: $clear-button-background-focus,
            clear-button-foreground: $clear-button-foreground,
            clear-button-foreground-focus: $clear-button-foreground-focus,
        )
    );
}