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

/// Select Theme
///
/// PRIMARY TOKENS:
/// - `$toggle-button-background` — The toggle button background.
///
/// Toggle button colors cascade from toggle-button-background through focus states.
///
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
/// @requires $light-material-schema
/// @param {Color} $toggle-button-background [null] - The select toggle button background color. PRIMARY - derives all toggle button colors.
/// @param {Color} $toggle-button-background-focus [null] - The select toggle button background color when the select is focused. Auto-derived from toggle-button-background (variant-dependent).
/// @param {Color} $toggle-button-background-disabled [null] - The select toggle button background color when the select is disabled.
/// @param {Color} $toggle-button-foreground [null] - The select toggle button foreground color. Auto-derived from toggle-button-background.
/// @param {Color} $toggle-button-foreground-focus [null] - The select toggle button foreground color when the select is focused. Auto-derived from toggle-button-background-focus (variant-dependent).
/// @param {Color} $toggle-button-foreground-disabled [null] - The select toggle button foreground color when the select is disabled.
/// @param {Color} $toggle-button-foreground-filled [null] - The select toggle button foreground color when the select is filled. Auto-derived from toggle-button-background.
/// @param {Color} $toggle-button-background-focus--border [null] - The select toggle button background color when the select is focused in material border variant. Auto-derived from toggle-button-background (bootstrap/indigo).
/// @example scss - Change the select empty list background
///   $my-select-theme: igx-select-theme($empty-list-background);
///   // Pass the theme to the css-vars mixin
///   @include css-vars($my-select-theme);
@function select-theme(
    $schema: $light-material-schema,
    $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-foreground-filled: null,
    $toggle-button-background-focus--border: null
) {
    $selector: #{config.element-prefix() + '-' + 'select'};
    $select-schema: ();

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

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

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

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

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

    @if not($toggle-button-foreground) and $toggle-button-background {
        $toggle-button-foreground: adaptive-contrast(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 $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 $variant == 'bootstrap' or $variant == 'indigo' {
        @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-focus) and $toggle-button-background-focus--border {
            $toggle-button-foreground-focus: adaptive-contrast(var(--toggle-button-background-focus--border));
        }
    } @else {
        @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-disabled) and $toggle-button-background {
        $toggle-button-background-disabled: hsl(from var(--toggle-button-background) h s l / 0.5);
    }

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

    @return extend(
        $theme,
        (
            selector: $selector,
            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,
        )
    );
}