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

/// Drop-down Theme
///
/// PRIMARY TOKENS:
/// - `$background-color` — The drop-down background.
/// - `$selected-item-background` — The selected item background.
///
/// Derived colors are auto-calculated for contrast.
///
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
/// @param {Color} $background-color [null] - The drop-down background color. PRIMARY - derives item, hover, focus, selected, disabled colors.
/// @param {Color} $header-text-color [null] - The drop-down header text color. Auto-derived from background-color.
/// @param {Color} $item-text-color [null] - The drop-down item text color. Auto-derived from background-color.
/// @param {Color} $item-icon-color [null] - The drop-down item icon color. Auto-derived from item-text-color.
/// @param {Color} $hover-item-text-color [null] - The drop-down item hover text color. Auto-derived from item-text-color.
/// @param {Color} $hover-item-icon-color [null] - The drop-down item hover icon color. Auto-derived from hover-item-text-color.
/// @param {Color} $hover-item-background [null] - The drop-down hover item background color. Auto-derived from background-color.
/// @param {Color} $focused-item-background [null] - The drop-down focused item background color. Auto-derived from background-color.
/// @param {Color} $focused-item-text-color [null] - The drop-down focused item text color. Auto-derived from focused-item-background.
/// @param {Color} $focused-item-border-color [null] - The drop-down item focused border color. Auto-derived from selected-item-background (indigo).
/// @param {Color} $selected-item-background [null] - The drop-down selected item background color. PRIMARY - derives selected text/icon and hover/focus states. Auto-derived from background-color.
/// @param {Color} $selected-item-text-color [null] - The drop-down selected item text color. Auto-derived from selected-item-background.
/// @param {Color} $selected-item-icon-color [null] - The drop-down selected item icon color. Auto-derived from selected-item-text-color.
/// @param {Color} $selected-hover-item-background [null] - The drop-down selected item hover background color. Auto-derived from selected-item-background.
/// @param {Color} $selected-hover-item-text-color [null] - The drop-down selected item hover text color. Auto-derived from selected-hover-item-background.
/// @param {Color} $selected-hover-item-icon-color [null] - The drop-down selected item hover icon color. Auto-derived from selected-hover-item-text-color.
/// @param {Color} $selected-focus-item-background [null] - The drop-down selected item focus background color. Auto-derived from selected-item-background.
/// @param {Color} $selected-focus-item-text-color [null] - The drop-down selected item focus text color. Auto-derived from selected-focus-item-background.
/// @param {Color} $disabled-item-background [null] - The drop-down disabled item background color.
/// @param {Color} $disabled-item-text-color [null] - The drop-down disabled item text color. Auto-derived from background-color or disabled-item-background.
/// @param {List} $shadow [null] - Sets a shadow to be used for the drop-down.
/// @param {Number} $border-width [null] - The border width used for drop-down component.
/// @param {Color} $border-color [null] - The border color used for drop-down component.
/// @param {List} $border-radius [null] - The border radius used for drop-down component.
/// @param {List} $item-border-radius [null] - The border radius used for drop-down items.
/// @requires $light-material-schema
/// @example scss - Change the background-color of the dropdown
///   $my-dropdown-theme: drop-down-theme($background-color: #09f);
///   // Pass the theme to the css-vars() mixin
///   @include css-vars($my-dropdown-theme);
@function drop-down-theme(
    $schema: $light-material-schema,

    $border-radius: null,
    $item-border-radius: null,

    $background-color: null,
    $header-text-color: null,

    $item-text-color: null,
    $item-icon-color: null,
    $hover-item-text-color: null,
    $hover-item-icon-color: null,

    $hover-item-background: null,

    $focused-item-background: null,
    $focused-item-text-color: null,
    $focused-item-border-color: null,

    $selected-item-background: null,
    $selected-item-text-color: null,
    $selected-item-icon-color: null,

    $selected-hover-item-background: null,
    $selected-hover-item-text-color: null,
    $selected-hover-item-icon-color: null,

    $selected-focus-item-background: null,
    $selected-focus-item-text-color: null,

    $disabled-item-background: null,
    $disabled-item-text-color: null,
    $border-color: null,
    $border-width: null,
    $shadow: null,
    $size: null
) {
    $selector: (#{config.element-prefix() + '-' + 'drop-down'}, '.igx-drop-down__list, .igx-grid-toolbar__dd-list');
    $drop-down-schema: ();

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

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

    @if $item-text-color {
        @if not($focused-item-text-color) {
            $focused-item-text-color: var(--item-text-color);
        }

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

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

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

        @if not($disabled-item-text-color) {
            $disabled-item-text-color: hsl(from var(--item-text-color) h s l / 0.4);
        }
    }

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

    @if not($item-icon-color) and $item-text-color {
        $item-icon-color: hsl(from var(--item-text-color) h s l / 0.8);
    }

    @if not($hover-item-background) and $background-color {
        $hover-item-background: hsl(from adaptive-contrast(var(--background-color)) h s l / 0.12);
    }

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

    @if not($hover-item-icon-color) and $hover-item-text-color {
        $hover-item-icon-color: hsl(from var(--hover-item-text-color) h s l / 0.8);
    }

    @if not($focused-item-background) and $background-color {
        $focused-item-background: hsl(from var(--background-color) h s calc(l * 0.8));
    }

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

    @if not($selected-item-background) and $background-color {
        $selected-item-background: hsl(from var(--background-color) h s calc(l * 1.2));
    }

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

    @if not($selected-item-icon-color) and $selected-item-text-color {
        $selected-item-icon-color: hsl(from var(--selected-item-text-color) h s l / 0.8);
    }

    @if not($selected-hover-item-background) and $selected-item-background {
        $selected-hover-item-background: hsl(from var(--selected-item-background) h s calc(l * 0.7));
    }

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

    @if not($selected-hover-item-icon-color) and $selected-hover-item-text-color {
        $selected-hover-item-icon-color: hsl(from var(--selected-hover-item-text-color) h s l / 0.8);
    }

    @if not($selected-focus-item-background) and $selected-item-background {
        $selected-focus-item-background: hsl(from var(--selected-item-background) h s calc(l * 0.7));
    }

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

    @if $variant == 'indigo' {
        @if not($focused-item-border-color) and $selected-item-background {
            $focused-item-border-color: var(--selected-item-background);
        }
    }

    @if not($disabled-item-text-color) and $background-color {
        $disabled-item-text-color: hsl(from adaptive-contrast(var(--background-color)) h s l / 0.36);
    }

    @if not($disabled-item-text-color) and $disabled-item-background {
        $disabled-item-text-color: hsl(from adaptive-contrast(var(--disabled-item-background)) h s l / 0.36);
    }

    @if not($header-text-color) and $background-color {
        $header-text-color: hsl(from adaptive-contrast(var(--background-color)) h s l / 0.7);
    }

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

    @return extend(
        $theme,
        (
            selector: $selector,
            background-color: $background-color,
            border-radius: $border-radius,
            item-border-radius: $item-border-radius,
            header-text-color: $header-text-color,
            item-text-color: $item-text-color,
            item-icon-color: $item-icon-color,
            hover-item-text-color: $hover-item-text-color,
            hover-item-icon-color: $hover-item-icon-color,
            hover-item-background: $hover-item-background,
            focused-item-background: $focused-item-background,
            focused-item-text-color: $focused-item-text-color,
            focused-item-border-color: $focused-item-border-color,
            selected-item-background: $selected-item-background,
            selected-item-text-color: $selected-item-text-color,
            selected-item-icon-color: $selected-item-icon-color,
            selected-hover-item-background: $selected-hover-item-background,
            selected-hover-item-text-color: $selected-hover-item-text-color,
            selected-hover-item-icon-color: $selected-hover-item-icon-color,
            selected-focus-item-background: $selected-focus-item-background,
            selected-focus-item-text-color: $selected-focus-item-text-color,
            disabled-item-background: $disabled-item-background,
            disabled-item-text-color: $disabled-item-text-color,
            elevation: $shadow,
            border-color: $border-color,
            border-width: $border-width,
            size: $size,
        )
    );
}