@use 'sass:map';
@use '../../base' as *;
@use '../../themes/schemas' as *;

////
/// @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.
/// @requires $light-material-schema
/// @param {Color} $toggle-button-background [null] - The select toggle button background color.
/// @param {Color} $toggle-button-background-focus [null] - The select toggle button background color when the select is focused.
/// @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.
/// @param {Color} $toggle-button-foreground-focus [null] - The select toggle button foreground color when the select is focused.
/// @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.
/// @param {Color} $toggle-button-background-focus--border [null] - The select toggle button background color when the select is focused in material border variant.
/// @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,
) {
    $name: 'igx-select';
    $selector: 'igx-select';

    $select-schema: ();

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

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

    @return extend($theme, (
        name: $name,
        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,
        theme: map.get($schema, '_meta', 'theme'),
        _meta: map.merge(if($meta, $meta, ()), (
            variant: map.get($schema, '_meta', 'theme')
        )),
    ));
}

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
@mixin select($theme) {
    @include css-vars($theme);
    $variant: map.get($theme, '_meta', 'variant');

    %igx-select {
        position: relative;
        display: block;
    }

    @if $variant == 'bootstrap' {
        .igx-input-group--disabled {
            %igx-select__toggle-button {
                border-inline-start-width: rem(1px);
                border-inline-start-style: solid;
                border-inline-start-color: inherit;
            }
        }

        igx-suffix + %igx-select__toggle-button {
            border-inline-start-width: rem(1px);
            border-inline-start-style: solid;
            border-inline-start-color: inherit;
        }
    }

    .igx-input-group {
        %igx-select__toggle-button {
            background: var-get($theme, 'toggle-button-background');
            color: var-get($theme, 'toggle-button-foreground');
        }
    }

    %form-group-bundle:focus-within {
        %igx-select__toggle-button {
            color: var-get($theme, 'toggle-button-foreground-focus');
        }
    }

    @if $variant == 'indigo' {
        %form-group-bundle:hover {
            %igx-select__toggle-button {
                color: var-get($theme, 'toggle-button-foreground-focus');
            }
        }
    }

    .igx-input-group--filled {
        %igx-select__toggle-button {
            color: var-get($theme, 'toggle-button-foreground-filled');
        }
    }

    .igx-input-group--focused %igx-select__toggle-button {
        background: var-get($theme, 'toggle-button-background-focus');
        color: var-get($theme, 'toggle-button-foreground-focus');
    }

    .igx-input-group.igx-input-group--focused:not(.igx-input-group--box) {
        @if $variant != 'fluent' {
            %igx-select__toggle-button {
                background: var-get($theme, 'toggle-button-background-focus--border');
            }
        }
    }

    .igx-input-group.igx-input-group--disabled.igx-input-group--filled,
    .igx-input-group.igx-input-group--disabled {
        %igx-select__toggle-button {
            background: var-get($theme, 'toggle-button-background-disabled');
            color: var-get($theme, 'toggle-button-foreground-disabled');
        }
    }
}