@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.
/// @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: 'igx-combo';
    $selector: 'igx-combo, igx-simple-combo';

    $combo-schema: ();

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

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

    @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,
        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 combo($theme) {
    @include css-vars($theme);

    $variant: map.get($theme, '_meta', 'variant');

    $search-input-inline-padding: map.get((
        'material': pad-inline(rem(4px), rem(8px), rem(16px)),
        'fluent': pad-inline(rem(2px), rem(4px), rem(8px)),
        'bootstrap': pad-inline(rem(4px), rem(8px), rem(16px)),
        'indigo': pad-inline(rem(12px))
    ), $variant);

    $search-input-block-padding: map.get((
        'material': pad-inline(rem(8px)),
        'fluent': pad-inline(rem(2px), rem(4px), rem(8px)),
        'bootstrap': pad-inline(rem(8px)),
        'indigo': pad-inline(rem(12px))
    ), $variant);

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

    %igx-combo__checkbox {
        margin-inline-end: rem(8px);

        @if $variant == 'material' {
            margin-inline-end: rem(16px);

            div {
                padding: 0;
            }
        }
    }

    %igx-combo__drop-down {
        position: absolute;
        width: 100%;

        .igx-drop-down {
            width: 100%;
        }
    }

    %igx-combo__search {
        padding-inline: $search-input-inline-padding;
        padding-block: $search-input-block-padding;
        margin: 0 !important;
        z-index: 26;
        border-bottom: rem(1px) dashed var-get($theme, 'search-separator-border-color');

        .igx-input-group__bundle {
            padding-block-start: 0;
            height: auto;
        }

        .igx-input-group__bundle-main {
            padding-inline: 0;
        }

        .igx-input-group__bundle-start,
        .igx-input-group__bundle-end {
            min-width: 0;
        }

        igx-input-group {
            --theme: #{if($variant == 'indigo', 'indigo', 'material')};
            --ig-size: #{if($variant == 'indigo', 2, 1)};
        }
    }

    %igx-combo__case-icon,
    %igx-combo__case-icon--active {
        line-height: 0;

        igx-icon {
            --size: rem(18px);
        }
    }

    // The wrapping element here is needed
    // in order to override the !important rule of .igx-icon--inactive.
    %igx-combo__case-icon {
        igx-icon {
            // Important is needed since the .igx-icon--inactive has !important
            color: color($color: 'gray', $variant: 600) !important;
        }
    }

    %igx-combo__case-icon--active {
        igx-icon {
            color: color($color: 'primary')
        }
    }

    %igx-combo__content {
        position: relative;
        overflow: hidden;
        max-height: calc(var(--size) * 10);

        &:focus {
            outline: transparent;
        }
    }

    %igx-combo__add {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        padding: rem(16px);
        gap: rem(16px);
        background: var-get($theme, 'empty-list-background');
    }

    %igx-combo__add-item {
        height: auto !important;
        background: var-get($theme, 'empty-list-background') !important;
        justify-content: center;
        outline: none !important;
    }

    %igx-combo__empty {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        color: var-get($theme, 'empty-list-placeholder-color');
        padding: 0 rem(24px);
        font-size: rem(13px);
    }

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

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

        .igx-input-group__bundle::after {
            height: rem(1px) !important;
        }
    }

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

        %igx-combo__clear-button {
            @if $variant == 'bootstrap' {
                border-inline-end: rem(1px) solid var(--border-color);
            }

            &:empty {
                padding: 0;
            }
        }
    }

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

        %igx-combo__clear-button {
            color: var-get($theme, 'clear-button-foreground-focus');
            background: var-get($theme, 'clear-button-background-focus');
        }
    }

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

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

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

        %igx-combo__clear-button {
            color: var-get($theme, 'clear-button-foreground-focus');
            background: var-get($theme, 'clear-button-background-focus');
        }
    }

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

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

        %igx-combo__clear-button {
            @if $variant == 'bootstrap' {
                border-inline-end: 0;
            }
        }
    }

    %form-group-bundle {
        &:hover {
            %igx-combo__clear-button {
                color: inherit;
            }
        }
    }
}