@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>
////

/// @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.
/// @param {Color} $empty-list-background [null] - The combo list background color.
/// @param {Color} $toggle-button-background [null] - The combo toggle button background color.
/// @param {Color} $toggle-button-background-focus [null] - The combo toggle button background color when the combo is focused in material box variant.
/// @param {Color} $toggle-button-background-focus--border [null] - The combo toggle button background color when the combo is focused in material border variant.
/// @param {Color} $toggle-button-background-disabled [null] - The combo toggle button background color when the combo is disabled.
/// @param {Color} $toggle-button-foreground [null] - The combo toggle button foreground color.
/// @param {Color} $toggle-button-foreground-focus [null] - The combo toggle button foreground color when the combo is focused.
/// @param {Color} $toggle-button-foreground-disabled [null] - The combo toggle button foreground color when the combo is disabled.
/// @param {Color} $toggle-button-foreground-filled [null] - The combo toggle button foreground color when the combo is filled.
/// @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.
/// @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.
/// @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
) {
    $name: #{config.variable-prefix() + '-' + 'combo'};
    $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: hsla(from var(--toggle-button-background) h s l / 0.3);
    }

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

    @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,
        (
            name: $name,
            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,
        )
    );
}