@use 'sass:map';
@use 'sass:meta';
@use 'sass:color';
@use '../../base' as *;
@use '../../themes/schemas' as *;
@use 'igniteui-theming/sass/animations/easings' as *;

////
/// @group themes
/// @access public
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
////

/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
/// @param {Color} $background [null] - The list background color.
/// @param {Color} $header-background [null] - The list header background color.
/// @param {Color} $header-text-color [null] - The list header text color.
/// @param {Color} $item-background [null] - The list item background color.
/// @param {Color} $item-background-hover [null] - The list item hover background color.
/// @param {Color} $item-background-active [null] - The active list item background color.
/// @param {Color} $item-background-selected [null] - The selected list item background color.
/// @param {Color} $item-text-color [null] - The list item text color.
/// @param {Color} $item-text-color-hover [null] - The list item hover text color.
/// @param {Color} $item-text-color-active [null] - The active list item text color.
/// @param {Color} $item-text-color-selected [null] - The selected list item text color.
/// @param {Color} $item-title-color [null] - The list item title color.
/// @param {Color} $item-title-color-hover [null] - The list item hover title color.
/// @param {Color} $item-title-color-active [null] - The active list item title color.
/// @param {Color} $item-title-color-selected [null] - The selected list item title color.
/// @param {Color} $item-subtitle-color [null] - The list item subtitle color.
/// @param {Color} $item-subtitle-color-hover [null] - The list item hover subtitle color.
/// @param {Color} $item-subtitle-color-active [null] - The active list item subtitle color.
/// @param {Color} $item-subtitle-color-selected [null] - The selected list item subtitle color.
/// @param {Color} $item-action-color [null] - The list item action color.
/// @param {Color} $item-action-color-hover [null] - The list item hover action color.
/// @param {Color} $item-action-color-active [null] - The active list item action color.
/// @param {Color} $item-action-color-selected [null] - The selected list item action color.
/// @param {Color} $item-thumbnail-color [null] - The list item thumbnail color.
/// @param {Color} $item-thumbnail-color-hover [null] - The list item hover thumbnail color.
/// @param {Color} $item-thumbnail-color-active [null] - The active list item thumbnail color.
/// @param {Color} $item-thumbnail-color-selected [null] - The selected list item thumbnail color.
/// @param {List} $border-radius [null] - The border radius used for list component.
/// @param {List} $item-border-radius [null] - The border radius used for list item.
/// @param {Color} $border-width [null] - The list border width.
/// @param {Number} $border-color [null] - The list border color.
/// @requires $light-material-schema
/// @example scss Change the list background color
///   $my-list-theme: list-theme($background: black);
///   // Pass the theme to the css-vars() mixin
///   @include css-vars($my-list-theme);
@function list-theme(
    $schema: $light-material-schema,

    $border-radius: null,
    $item-border-radius: null,
    $background: null,
    $header-background: null,
    $header-text-color: null,
    $item-background: null,
    $item-background-hover: null,
    $item-background-active: null,
    $item-background-selected: null,
    $item-text-color: null,
    $item-text-color-hover: null,
    $item-text-color-active: null,
    $item-text-color-selected: null,
    $item-title-color: null,
    $item-title-color-hover: null,
    $item-title-color-active: null,
    $item-title-color-selected: null,
    $item-subtitle-color: null,
    $item-subtitle-color-hover: null,
    $item-subtitle-color-active: null,
    $item-subtitle-color-selected: null,
    $item-action-color: null,
    $item-action-color-hover: null,
    $item-action-color-active: null,
    $item-action-color-selected: null,
    $item-thumbnail-color: null,
    $item-thumbnail-color-hover: null,
    $item-thumbnail-color-active: null,
    $item-thumbnail-color-selected: null,
    $border-color: null,
    $border-width: null,
) {
    $name: 'igx-list';
    $list-schema: ();

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

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

    @if not($header-background) and $background {
        $header-background: $background;
    }

    @if not($header-background) and $item-background {
        $header-background: $item-background;
    }

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

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

    @if not($item-background-hover) and $item-background {
        @if meta.type-of($item-background) == 'color' {
            @if luminance($item-background) < .5 {
                $item-background-hover: color.scale($item-background, $lightness: 8%);
            } @else {
                $item-background-hover: color.scale($item-background, $lightness: -8%);
            }
        }
    }

    @if not($item-background-active) and $item-background {
        @if meta.type-of($item-background) == 'color' {
            @if luminance($item-background) < .5 {
                $item-background-active: color.scale($item-background, $lightness: 8%);
            } @else {
                $item-background-active: color.scale($item-background, $lightness: -8%);
            }
        }
    }

    @if not($item-background-selected) and $item-background {
        @if meta.type-of($item-background) == 'color' {
            @if luminance($item-background) < .5 {
                $item-background-selected: color.scale($item-background, $lightness: 8%);
            } @else {
                $item-background-selected: color.scale($item-background, $lightness: -8%);
            }
        }
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    @if not($item-subtitle-color-active) and $item-text-color-active {
        $item-subtitle-color-active: $item-text-color-active;
    }

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

    @return extend($theme, (
        name: $name,
        border-radius: $border-radius,
        item-border-radius: $item-border-radius,
        background: $background,
        header-background: $header-background,
        header-text-color: $header-text-color,
        item-background: $item-background,
        item-background-hover: $item-background-hover,
        item-background-active: $item-background-active,
        item-background-selected: $item-background-selected,
        item-text-color: $item-text-color,
        item-text-color-hover: $item-text-color-hover,
        item-text-color-active: $item-text-color-active,
        item-text-color-selected: $item-text-color-selected,
        item-title-color:$item-title-color,
        item-title-color-hover:$item-title-color-hover,
        item-title-color-active:$item-title-color-active,
        item-title-color-selected:$item-title-color-selected,
        item-subtitle-color: $item-subtitle-color,
        item-subtitle-color-hover: $item-subtitle-color-hover,
        item-subtitle-color-active: $item-subtitle-color-active,
        item-subtitle-color-selected: $item-subtitle-color-selected,
        item-action-color: $item-action-color,
        item-action-color-hover: $item-action-color-hover,
        item-action-color-active: $item-action-color-active,
        item-action-color-selected: $item-action-color-selected,
        item-thumbnail-color: $item-thumbnail-color,
        item-thumbnail-color-hover: $item-thumbnail-color-hover,
        item-thumbnail-color-active: $item-thumbnail-color-active,
        item-thumbnail-color-selected: $item-thumbnail-color-selected,
        border-color: $border-color,
        border-width: $border-width,
        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 list($theme) {
    @include css-vars($theme);

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

    $theme-padding-block-l: map.get((
        'material': rem(8px),
        'fluent': rem(8px),
        'bootstrap': rem(8px),
        'indigo': rem(8px),
    ), $variant);

    $theme-padding-inline-l: map.get((
        'material': rem(16px),
        'fluent': rem(16px),
        'bootstrap': rem(16px),
        'indigo': rem(16px),
    ), $variant);

    $theme-padding-block-m: map.get((
        'material': rem(4px),
        'fluent': rem(4px),
        'bootstrap': rem(4px),
        'indigo': rem(6px),
    ), $variant);

    $theme-padding-inline-m: map.get((
        'material': rem(8px),
        'fluent': rem(8px),
        'bootstrap': rem(8px),
        'indigo': rem(12px),
    ), $variant);

    $theme-padding-block-s: map.get((
        'material': rem(2px),
        'fluent': rem(2px),
        'bootstrap': rem(2px),
        'indigo': rem(4px),
    ), $variant);

    $theme-padding-inline-s: map.get((
        'material': rem(4px),
        'fluent': rem(4px),
        'bootstrap': rem(4px),
        'indigo': rem(8px),
    ), $variant);

    %igx-list {
        @include sizable();

        --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
        --list-size: var(--component-size);
        position: relative;
        display: flex;
        flex-flow: column nowrap;
        background: var-get($theme, 'background');
        height: auto;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 0;
        border-radius: var-get($theme, 'border-radius');

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

        &:focus-visible {
            outline-style: none;
        }

        @if $variant == 'indigo' {
            gap: rem(4px);
        }

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

        @if $variant == 'material' {
            %cbx-composite-wrapper {
                padding: 0;
            }

            %cbx-label-pos--after {
                margin-inline-start: rem(12px);
            }

            %cbx-label-pos--before {
                margin-inline-end: rem(12px);
            }

            %cbx-label-pos--before,
            %cbx-label-pos--after {
                &:empty {
                    margin: 0;
                }
            }
        }
    }

    %igx-list--empty {
        justify-content: center;
        align-items: center;
    }

    %igx-list__message--empty {
        text-align: center;
        color: var-get($theme, 'item-text-color');
        padding: rem(16px);
        z-index: 1;
    }

    %igx-list-header {
        --component-size: var(--list-size);
        display: flex;
        align-items: center;
        color: var-get($theme, 'header-text-color');
        background: var-get($theme, 'header-background');
        user-select: none;

        @if $variant == 'indigo' {
            min-height: sizable(rem(24), rem(28), rem(32));
        }
    }

    %igx-list-item-base {
        display: flex;
        flex-flow: column wrap;
        justify-content: center;
        border-radius: var-get($theme, 'item-border-radius');
        color: var-get($theme, 'item-text-color');
        background: var-get($theme, 'item-background');

        @if $bootstrap-theme or $variant == 'fluent' {
            border-bottom: var-get($theme, 'border-width') solid var-get($theme, 'border-color');

            &:last-of-type {
                border-bottom: none;
            }
        }

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

            %igx-list__item-lines {
                color: currentColor;
            }

            %igx-list__item-line-title {
                color: var-get($theme, 'item-title-color-hover');
            }

            %igx-list__item-line-subtitle {
                color: var-get($theme, 'item-subtitle-color-hover');
            }

            %igx-list__item-actions {
                color: var-get($theme, 'item-action-color-hover');

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

            %igx-list__item-thumbnail {
                color: var-get($theme, 'item-thumbnail-color-hover');

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

    %igx-list-item-base--active {
        %igx-list-item-content {
            @extend %igx-list-item-content--active;
        }
    }

    %igx-list-item-base--selected {
        %igx-list-item-content {
            @extend %igx-list-item-content--selected;
        }
    }

    %igx-list-item-pan {
        position: absolute;
        visibility: hidden;
        display: flex;
        z-index: 1;
    }

    %igx-list__item-lines {
        color: currentColor;
        display: flex;
        flex-direction: column;
        flex: 1 0 0%;
        gap: rem(2px);

        &:empty {
            display: none;
        }
    }

    %igx-list__item-line-subtitle {
        color: var-get($theme, 'item-subtitle-color');
    }

    %igx-list__item-line-title {
        color: var-get($theme, 'item-title-color');
    }

    %igx-list__item-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var-get($theme, 'item-action-color');
        gap: if($variant == 'indigo', sizable(rem(4), rem(6), rem(8)), rem(8px));

        &:empty {
            display: none;
        }

        > * {
            --component-size: #{if($variant == 'indigo', 2, var(--list-size))};
        }

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

        [dir='rtl'] & {
            igx-icon,
            igc-icon {
                transform: scaleX(-1);
            }
        }
    }

    %igx-list-item-content {
        --component-size: var(--list-size);
        display: flex;
        align-items: center;
        position: relative;
        border-radius: var-get($theme, 'item-border-radius');
        background: inherit;
        z-index: 2;
        gap: if($variant == 'indigo', rem(8px), rem(16px));
    }

    %igx-list-header,
    %igx-list-item-content {
        padding-inline: pad-inline($theme-padding-inline-s, $theme-padding-inline-m, $theme-padding-inline-l);
        padding-block: pad-block($theme-padding-block-s, $theme-padding-block-m, $theme-padding-block-l);
    }

    %igx-list__item-thumbnail {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        padding: 0;
        color: var-get($theme, 'item-thumbnail-color');
        gap: rem(8px);


        > igx-icon,
        > igc-icon {
            --component-size: #{if($variant == 'indigo', 2, var(--list-size))};
        }

        &:empty {
            display: none;
        }
    }

    %igx-list__item-thumbnail:not(:empty) + %igx-list__item-lines {
        --component-size: var(--list-size);
    }

    %igx-list-item-content--active {
        color: var-get($theme, 'item-text-color-active');
        background: var-get($theme, 'item-background-active');
        z-index: 3;

        %igx-list__item-line-title {
            color: var-get($theme, 'item-title-color-active')
        }

        %igx-list__item-line-subtitle {
            color: var-get($theme, 'item-subtitle-color-active')
        }

        %igx-list__item-actions {
            color: var-get($theme, 'item-action-color-active');

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

        %igx-list__item-thumbnail {
            color: var-get($theme, 'item-thumbnail-color-active');

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

    %igx-list-item-content--selected {
        color: var-get($theme, 'item-text-color-selected');
        background: var-get($theme, 'item-background-selected');
        z-index: 3;

        %igx-list__item-line-title {
            color: var-get($theme, 'item-title-color-selected')
        }

        %igx-list__item-line-subtitle {
            color: var-get($theme, 'item-subtitle-color-selected')
        }

        %igx-list__item-actions {
            color: var-get($theme, 'item-action-color-selected');

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

        %igx-list__item-thumbnail {
            color: var-get($theme, 'item-thumbnail-color-selected');

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

    %igx-list-item-content--inactive {
        transition: transform .3s $out-quad;
    }
}

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

    %igx-list-header {
        @include type-style($header) {
            margin: 0;
        }
    }

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

    %igx-list__item-lines,
    %igx-list__item-line-title {
        @include type-style($title) {
            margin: 0;
        }
    }

    %igx-list__item-line-subtitle {
        @include type-style($subtitle) {
            margin: 0;
        }
    }
}