@use 'sass:map';
@use 'sass:meta';
@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>
////

/// Generates a drop-down theme.
/// @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.
/// @param {Color} $header-text-color [null] - The drop-down header text color.
/// @param {Color} $item-text-color [null] - The drop-down item text color.
/// @param {Color} $item-icon-color [null] - The drop-down item icon color.
/// @param {Color} $hover-item-text-color [null] - The drop-down item hover text color.
/// @param {Color} $hover-item-icon-color [null] - The drop-down item hover icon color.
/// @param {Color} $hover-item-background [null] - The drop-down hover item background color.
/// @param {Color} $focused-item-background [null] - The drop-down focused item background color.
/// @param {Color} $focused-item-text-color [null] - The drop-down focused item text color.
/// @param {Color} $focused-item-border-color [null] - The drop-down item focused border color.
/// @param {Color} $selected-item-background [null] - The drop-down selected item background color.
/// @param {Color} $selected-item-text-color [null] - The drop-down selected item text color.
/// @param {Color} $selected-item-icon-color [null] - The drop-down selected item icon color.
/// @param {Color} $selected-hover-item-background [null] - The drop-down selected item hover background color.
/// @param {Color} $selected-hover-item-text-color [null] - The drop-down selected item hover text color.
/// @param {Color} $selected-hover-item-icon-color [null] - The drop-down selected item hover icon color.
/// @param {Color} $selected-focus-item-background [null] - The drop-down selected item focus background color.
/// @param {Color} $selected-focus-item-text-color [null] - The drop-down selected item focus text color.
/// @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.
/// @param {box-shadow} $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
) {
    $name: 'igx-drop-down';
    $selector: '.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);
    $meta: map.get($theme, '_meta');

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

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

        @if meta.type-of($background-color) == 'color' {
            $hover-item-background: rgba(text-contrast($background-color), .12);
        }
    }

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

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

        @if meta.type-of($background-color) == 'color' {
            $focused-item-background: rgba(text-contrast($background-color), .12);
        }
    }

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

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

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

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

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

    @if not($disabled-item-text-color) and $background-color {
        @if meta.type-of($background-color) == 'color' {
            $disabled-item-text-color: rgba(text-contrast($background-color), .36);
        }
    }

    @if not($disabled-item-text-color) and $disabled-item-background {
        @if meta.type-of($disabled-item-background) == 'color' {
            $disabled-item-text-color: rgba(text-contrast($disabled-item-background), .36);
        }
    }

    @if not($header-text-color) and $background-color {
        @if meta.type-of($background-color) == 'color' {
            $header-text-color: rgba(text-contrast($background-color), .7);
        }
    }

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

    @return extend($theme, (
        name: $name,
        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,
        shadow: $shadow,
        border-color: $border-color,
        border-width: $border-width,
        size: $size,
        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 drop-down($theme) {
    @include css-vars($theme);
    $variant: map.get($theme, '_meta', 'variant');

    %igx-drop-down {
        position: absolute;
    }

    %igx-drop-down__list {
        @include sizable();

        --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
        --dropdown-size: var(--component-size);
        overflow: hidden;
        border-radius: var-get($theme, 'border-radius');
        background: var-get($theme, 'background-color');
        box-shadow: var-get($theme, 'shadow');
        min-width: rem(128px);
        border: var-get($theme, 'border-width') solid var-get($theme, 'border-color');

        @if $variant == 'indigo' {
            padding: rem(3px);

            %igx-drop-down__item {
                margin-block: rem(2px);

                &:first-of-type,
                &:last-of-type {
                    margin-block: initial;
                }
            }

            %igx-drop-down__header {
                margin-block-end: rem(2px);
            }
        }
    }

    %igx-drop-down__list-scroll {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }

    %igx-drop-down__content {
        display: flex;
        width: 100%;
        align-items: center;
        gap: rem(8px)
    }

    %igx-drop-down__inner {
        display: block;
        @include ellipsis();
        margin-inline-end: auto;
    }

    %igx-drop-down__inner + [igxSuffix],
    %igx-drop-down__inner + igx-suffix {
        margin-inline-end: 0;
    }

    %igx-drop-down__header,
    %igx-drop-down__item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        white-space: nowrap;
        position: relative;
        height: var-get($theme, 'size');

        igx-divider {
            position: absolute;
            width: 100%;
            inset-inline-start: 0;
            bottom: 0;
        }

        igx-icon {
            justify-content: center;
            --component-size: 1;

            @if $variant == 'fluent' {
                --component-size: 3;
            }

            @if $variant == 'indigo' {
                $icon-size: sizable(rem(14px), rem(16px), rem(16px));

                width: var(--ig-icon-size, $icon-size);
                height: var(--ig-icon-size, $icon-size);
                font-size: var(--ig-icon-size, $icon-size);
            }
        }
    }

    %igx-drop-down__item {
        @include sizable();
        --component-size: var(--dropdown-size);

        color: var-get($theme, 'item-text-color');
        cursor: pointer;
        padding-inline: pad-inline(rem(16px), rem(20px), rem(24px));
        border-radius: var-get($theme, 'item-border-radius');

        igx-icon {
            color: var-get($theme, 'item-icon-color');
        }

        @if $variant == 'indigo' {
            padding-inline: pad-inline(rem(8px), rem(12px), rem(12px));
        }

        &:focus {
            outline: 0;
            outline-color: transparent;
            background: var-get($theme, 'focused-item-background');
            color: var-get($theme, 'focused-item-text-color');
        }

        &:hover {
            background: var-get($theme, 'hover-item-background');
            color: var-get($theme, 'hover-item-text-color');

            igx-icon {
                color: var-get($theme, 'hover-item-icon-color');
            }
        }
    }

    %igx-drop-down__header {
        color: var-get($theme, 'header-text-color');
        pointer-events: none;
        padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));

        @if $variant == 'indigo' {
            padding-inline: pad-inline(rem(8px), rem(12px), rem(12px));
            padding-block: pad-inline(rem(4px), rem(6px), rem(8px));
        }
    }

    %igx-drop-down__group {
        pointer-events: auto;

        label {
            @extend %igx-drop-down__header !optional;
        }
    }

    %igx-drop-down__item--focused {
        background: var-get($theme, 'focused-item-background');
        color: var-get($theme, 'focused-item-text-color');

        @if $variant == 'fluent' {
            outline: rem(1px) solid var-get($theme, 'border-color');
            outline-offset: rem(-1px);
        }

        @if $variant == 'indigo' {
            outline: rem(2px) solid var-get($theme, 'focused-item-border-color');
            outline-offset: rem(-2px);
        }
    }

    %igx-drop-down__item--selected {
        background: var-get($theme, 'selected-item-background');
        color: var-get($theme, 'selected-item-text-color');

        igx-icon {
            color: var-get($theme, 'selected-item-icon-color');
        }
    }

    %igx-drop-down__item--selected--focused {
        background: var-get($theme, 'selected-focus-item-background');
        color: var-get($theme, 'selected-focus-item-text-color');
    }

    %igx-drop-down__item--selected,
    %igx-drop-down__item--selected--focused {
        &:hover {
            background: var-get($theme, 'selected-hover-item-background');
            color: var-get($theme, 'selected-hover-item-text-color');

            igx-icon {
                color: var-get($theme, 'selected-hover-item-icon-color');
            }
        }
    }

    %igx-drop-down__item--disabled {
        background: var-get($theme, 'disabled-item-background');
        color: var-get($theme, 'disabled-item-text-color');
        cursor: default;
        pointer-events: none;

        igx-icon {
            color: var-get($theme, 'disabled-item-text-color');
        }
    }
}

/// Adds typography styles for the igx-drop-down component.
/// Uses the 'overline', 'body-2', 'subtitle-1'
/// categories from the typographic scale.
/// @group typography
/// @param {Map} $categories [(header: 'overline', item: 'body-2', select-item: 'body-2')] - The categories from the typographic scale used for type styles.
@mixin drop-down-typography(
    $categories: (
        header: 'overline',
        item: 'body-2',
        select-item: 'body-2'
    )
) {
    $header: map.get($categories, 'header');
    $item: map.get($categories, 'item');
    $select-item: map.get($categories, 'select-item');

    %igx-drop-down__header,
    %igx-drop-down__group > label {
        @include type-style($header) {
            margin: 0;
        }
    }

    %igx-drop-down__item {
        @include type-style($item) {
            margin: 0;
        }
    }

    %igx-drop-down__item--selected {
        @include type-style($select-item) {
            margin: 0;
        }
    }
}