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

/// Chip Theme
///
/// PRIMARY TOKENS:
/// - `$background` — The main chip background.
/// - `$selected-background` — Selected state background.
///
/// Setting just `$background` will create a complete chip theme with all states properly derived.
///
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
/// @param {List} $border-radius [null] - The chip border-radius.
///
/// @param {Color} $text-color [null] - The chip text color. Auto-derived from background.
/// @param {Color} $background [null] - The chip background color. PRIMARY - derives text-color, border-color, hover/focus states.
/// @param {Color} $border-color [null] - The chip border color. Auto-derived from background.
///
/// @param {Color} $disabled-text-color [null] - The disabled chip text color.
/// @param {Color} $disabled-background [null] - The disabled chip background color.
/// @param {Color} $disabled-border-color [null] - The disabled chip border color.
///
/// @param {Color} $ghost-background [null] - The chip ghost background color.
/// @param {Color} $ghost-text-color [null] - The chip ghost text color.
/// @param {List} $ghost-shadow [null] - The chip ghost shadow.
///
/// @param {Color} $hover-text-color [null] - The chip text hover color. Auto-derived from hover-background.
/// @param {Color} $hover-background [null] - The chip hover background color. Auto-derived from background.
/// @param {Color} $hover-border-color [null] - The chip hover border color. Auto-derived from hover-background.
///
/// @param {Color} $focus-text-color [null] - The chip text focus color. Auto-derived from focus-background.
/// @param {Color} $focus-background [null] - The chip focus background color. Auto-derived from background.
/// @param {color} $focus-border-color [null] - The chip focus border color. Auto-derived from focus-background.
///
/// @param {color} $selected-text-color [null] - The selected chip text color. Auto-derived from selected-background.
/// @param {color} $selected-background [null] - The selected chip background color. Auto-derived from background.
/// @param {color} $selected-border-color [null] - The selected chip border color. Auto-derived from selected-background.
///
/// @param {color} $hover-selected-text-color [null] - The selected chip hover text color. Auto-derived from hover-selected-background.
/// @param {color} $hover-selected-background [null] - The selected chip hover background color. Auto-derived from selected-background.
/// @param {color} $hover-selected-border-color [null] - The selected chip hover border color. Auto-derived from hover-selected-background.
///
/// @param {color} $focus-selected-text-color [null] - The selected chip text focus color. Auto-derived from focus-selected-background.
/// @param {color} $focus-selected-background [null] - The selected chip focus background color. Auto-derived from selected-background.
/// @param {color} $focus-selected-border-color [null] - The selected chip focus border color. Auto-derived from focus-selected-background.
///
/// @param {color} $remove-icon-color [null] - The remove icon color for the chip.
/// @param {color} $remove-icon-color-focus [null] - The remove icon color on focus for the chip.
///
/// @requires $light-material-schema
///
/// @example scss - Change the background color
///   $my-chip-theme: igx-chip-theme($background: black);
///   // Pass the theme to the css-vars mixin
///   @include css-vars($my-chip-theme);
@function chip-theme(
    $schema: $light-material-schema,
    $border-radius: null,

    $text-color: null,
    $background: null,
    $border-color: null,
    $ghost-background: null,
    $ghost-text-color: null,

    $disabled-text-color: null,
    $disabled-background: null,
    $disabled-border-color: null,

    $hover-text-color: null,
    $hover-background: null,
    $hover-border-color: null,

    $focus-text-color: null,
    $focus-background: null,
    $focus-border-color: null,
    $focus-outline-color: null,

    $selected-text-color: null,
    $selected-background: null,
    $selected-border-color: null,

    $hover-selected-text-color: null,
    $hover-selected-background: null,
    $hover-selected-border-color: null,

    $focus-selected-text-color: null,
    $focus-selected-background: null,
    $focus-selected-border-color: null,
    $focus-selected-outline-color: null,

    $ghost-shadow: null,
    $remove-icon-color: null,
    $remove-icon-color-focus: null,
    $size: null
) {
    $selector: (#{config.element-prefix() + '-' + 'chip'}, '.igx-chip__ghost');
    $chip-schema: ();

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

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

    // have unified text-color for all states if text-color is provided

    @if not($hover-text-color) and $text-color {
        $hover-text-color: var(--text-color);
    }

    @if not($focus-text-color) and $text-color {
        $focus-text-color: var(--text-color);
    }

    @if not($selected-text-color) and $text-color {
        $selected-text-color: var(--text-color);
    }

    @if not($hover-selected-text-color) and $selected-text-color {
        $hover-selected-text-color: var(--selected-text-color);
    }

    @if not($focus-selected-text-color) and $selected-text-color {
        $focus-selected-text-color: var(--selected-text-color);
    }

    // rest of the styles are derived from background

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

    @if not($ghost-text-color) and $ghost-background {
        $ghost-text-color: adaptive-contrast(var(--ghost-background));
    }

    @if not($border-color) and $background {
        $border-color: var(--background);
    }

    @if not($hover-background) and $background {
        $hover-background: dynamic-shade(var(--background));
    }

    @if not($hover-text-color) and $hover-background {
        $hover-text-color: adaptive-contrast(var(--hover-background));
    }

    @if not($focus-background) and $background {
        $focus-background: dynamic-shade(var(--background), $offset: 7);
    }

    @if $variant == 'fluent' {
        @if not($focus-background) and $selected-background {
            $focus-background: var(--selected-background);
        }
    }

    @if not($focus-text-color) and $focus-background {
        $focus-text-color: adaptive-contrast(var(--focus-background));
    }

    @if $variant != 'indigo' and $variant != 'fluent' {
        @if not($selected-background) and $background {
            $selected-background: var(--background);
        }
    } @else {
        @if not($selected-background) and $background {
            $selected-background: dynamic-shade(var(--background));
        }
    }

    @if not($selected-text-color) and $selected-background {
        $selected-text-color: adaptive-contrast(var(--selected-background));
    }

    @if not($hover-selected-background) and $selected-background {
        $hover-selected-background: dynamic-shade(var(--selected-background));
    }

    @if not($hover-selected-text-color) and $hover-selected-background {
        $hover-selected-text-color: adaptive-contrast(var(--hover-selected-background));
    }

    @if $variant != 'indigo' {
        @if not($focus-selected-background) and $selected-background {
            $focus-selected-background: dynamic-shade(var(--selected-background), $offset: 7);
        }
    } @else {
        @if not($focus-selected-background) and $selected-background {
            $focus-selected-background: var(--selected-background);
        }
    }

    @if not($focus-selected-text-color) and $focus-selected-background {
        $focus-selected-text-color: adaptive-contrast(var(--focus-selected-background));
    }

    @if not($hover-border-color) and $hover-background {
        $hover-border-color: var(--hover-background);
    }

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

    @if not($selected-border-color) and $selected-background {
        $selected-border-color: var(--selected-background);
    }

    @if not($hover-selected-border-color) and $hover-selected-background {
        $hover-selected-border-color: var(--hover-selected-background);
    }

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

    @if $variant == 'bootstrap' or $variant == 'indigo' {
        @if not($focus-outline-color) and $focus-background {
            $focus-outline-color: hsl(from var(--focus-background) h s l / 0.4);
        }

        @if not($focus-selected-outline-color) and $focus-selected-background {
            $focus-selected-outline-color: hsl(from var(--focus-selected-background) h s l / 0.4);
        }
    }

    @if not($ghost-shadow) {
        $ghost-elevation: map.get($chip-schema, 'ghost-elevation');
        $ghost-shadow: elevation($ghost-elevation);
    }

    @return extend(
        $theme,
        (
            selector: $selector,
            border-radius: $border-radius,

            text-color: $text-color,
            background: $background,
            border-color: $border-color,
            ghost-background: $ghost-background,
            ghost-text-color: $ghost-text-color,

            disabled-text-color: $disabled-text-color,
            disabled-background: $disabled-background,
            disabled-border-color: $disabled-border-color,

            hover-text-color: $hover-text-color,
            hover-background: $hover-background,
            hover-border-color: $hover-border-color,

            focus-text-color: $focus-text-color,
            focus-background: $focus-background,
            focus-border-color: $focus-border-color,

            selected-text-color: $selected-text-color,
            selected-background: $selected-background,
            selected-border-color: $selected-border-color,

            hover-selected-text-color: $hover-selected-text-color,
            hover-selected-background: $hover-selected-background,
            hover-selected-border-color: $hover-selected-border-color,

            focus-selected-text-color: $focus-selected-text-color,
            focus-selected-background: $focus-selected-background,
            focus-selected-border-color: $focus-selected-border-color,

            ghost-elevation: $ghost-shadow,
            remove-icon-color: $remove-icon-color,
            remove-icon-color-focus: $remove-icon-color-focus,
            focus-selected-outline-color: $focus-selected-outline-color,
            focus-outline-color: $focus-outline-color,
            size: $size,
        )
    );
}