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

/// @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', 'theme');
    $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: var-get($theme, 'border-width') 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');
        border-bottom: var-get($theme, 'border-width') solid var-get($theme, 'border-color');

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

    %igx-list-item-base:not(%igx-list-item-base--selected) {
        &:hover,
        &:focus-within {
            %igx-list__item-lines {
                color: currentColor;
            }

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

                %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;
        }

        > *,
        [class^='igx'] {
            --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: var-get($theme, 'item-background');
        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))};
        }

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

        &: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;
        }
    }
}