@use 'sass:map';
@use '../../base' as *;

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
@mixin card($theme) {
    @include css-vars($theme);
    $variant: map.get($theme, '_meta', 'theme');
    $not-material-theme: $variant != 'material';

    $card-heading-padding: pad(rem(16px, 16px));

    $card-tgroup-margin: 0 em(16px);

    $card-transitions: box-shadow .3s cubic-bezier(.25, .8, .25, 1);

    %igx-card-display {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: var-get($theme, 'border-radius');
        background: var-get($theme, 'background');
        transition: $card-transitions;
        backface-visibility: hidden;
        border: rem(1px) solid var-get($theme, 'outline-color');

        &:hover {
            box-shadow: none;
        }
    }

    %igx-card--elevated {
        box-shadow: var-get($theme, 'resting-elevation');

        &:hover {
            box-shadow: var-get($theme, 'hover-elevation');
        }

        @if $not-material-theme {
            border: rem(1px) solid var-get($theme, 'outline-color');
        }
    }

    %igx-card--horizontal {
        flex-direction: row;
    }

    %igx-card-header {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        width: 100%;
        padding: $card-heading-padding;
        color: var-get($theme, 'header-text-color');

        &:empty {
            display: block;
            padding: 0;
        }
    }

    %igx-card-header--vertical {
        flex-flow: column nowrap;

        %igx-card-header-titles {
            text-align: center;
        }

        %igx-card-header-thumbnail {
            display: flex;
            justify-content: center;
            align-self: unset;
            margin-inline-end: 0;
            margin-bottom: rem(16px);

            @if $variant == 'indigo' {
                margin-bottom: rem(8px);
            }
        }
    }

    %igx-card-header-thumbnail {
        margin-inline-end: rem(16px);

        @if $variant == 'indigo' {
            margin-inline-end: rem(8px);
            margin-block: auto;
        }

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

        &:empty {
            display: none;
        }
    }

    %igx-card-header-titles {
        display: flex;
        flex-flow: column nowrap;
        overflow: hidden;
        flex: 1 1 auto;
        justify-content: center;

        &:empty {
            display: none;
        }

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

            %igx-card-header-subtitle {
                margin-block-end: rem(2px)
            }
        }
    }

    %igx-card-header-subtitle {
        color: var-get($theme, 'subtitle-text-color');
    }

    %igx-card-content {
        display: block;
        width: 100%;
        padding: pad(rem(16px));
        color: var-get($theme, 'content-text-color');
        overflow: auto;
    }

    %igx-card-media {
        display: block;
        overflow: hidden;
        line-height: 0;

        > * {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    %igx-card-media--right {
        width: auto;
        margin-inline-start: auto;
        order: 9999;
    }

    %igx-card-actions {
        $card-actions-padding: map.get((
            'material': pad-block(rem(8px)) pad-inline(rem(16px)),
            'fluent': pad-block(rem(8px)) pad-inline(rem(16px)),
            'bootstrap': pad(rem(16px)),
            'indigo': pad(rem(16px)),
        ), $variant);


        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: center;
        padding: $card-actions-padding;

        @if $variant == 'indigo' {
            [igxButton],
            [igxIconButton] {
                --ig-size: 2;
            }
        }

        &:first-child {
            margin-block-end: auto;
        }

        &:last-child {
            margin-block-start: auto;
        }
    }

    @if $variant == 'bootstrap' {
        %igx-card-content {
            padding-block-end: pad-block(rem(24px));
        }
    }

    @if $variant == 'indigo' {
        %igx-card-content {
            padding-block-end: pad-block(rem(8px));
        }

        %igx-card-content:last-child {
            padding-block-end: pad-block(rem(16px));
        }

        %igx-card-header {
            padding-block-end: 0;
        }

        %igx-card-header:last-child,
        %igx-card-header:first-child {
            padding-block-end: pad-block(rem(16px));
        }
    }

    %igx-card-actions--vertical {
        flex-direction: column;

        &:is(:first-child, :last-child) {
            margin-block: initial;
        }

        [dir='rtl'] & {
            order: -1;
        }
    }

    %igx-card-actions__end {
        display: flex;
        align-items: center;
        order: 1;
        margin-inline-start: auto;
        gap: rem(8px);

        &:empty {
            display: none;
        }
    }

    %igx-card-actions__start {
        display: flex;
        align-items: center;
        order: 0;
        gap: rem(8px);

        &:empty {
            display: none;
        }
    }

    %igx-card-actions__start,
    %igx-card-actions__end {
        color: var-get($theme, 'actions-text-color');
    }

    %igx-card-actions__start--justify,
    %igx-card-actions__end--justify {
        justify-content: space-around;
        flex-grow: 1;

        &:empty {
            display: none;
        }
    }

    %igx-card-actions__end--vertical,
    %igx-card-actions__start--vertical {
        flex-direction: column;

        [igxButton] ~ [igxButton] {
            margin-inline-start: 0;
            margin-top: rem(8px);
        }
    }

    %igx-card-actions__end--vertical {
        margin-top: auto;
        margin-inline-start: 0;
    }

    %igx-card-actions__end--reverse {
        order: 0;
        margin-inline-start: 0;
    }

    %igx-card-actions__start--reverse {
        order: 1;
        margin-inline-start: auto;
    }

    %igx-card-actions__end--vertical-reverse {
        margin: 0;
        margin-bottom: auto;
    }

    %igx-card-actions__start--vertical-reverse {
        margin: 0;
        margin-top: auto;
    }

    %igx-card-actions-bgroup {
        display: flex;
        flex-flow: row nowrap;
        gap: rem(8px);
    }

    %igx-card-actions-igroup {
        display: flex;
        flex-flow: row nowrap;

        %igx-icon-button-display {
            color: var-get($theme, 'actions-text-color');
        }
    }

    %igx-card-actions-igroup--start {
        margin-inline-end: auto;
    }

    %igx-card-actions-igroup--end {
        margin-inline-start: auto;
    }
}

/// Adds typography styles for the igx-card component.
/// Uses the 'h6', 'subtitle-2' and 'body-2'
/// category from the typographic scale.
/// @group typography
/// @param {Map} $categories [(title: 'h6', title-small: 'subtitle-2', subtitle: 'subtitle-2', content: 'body-2')] - The categories from the typographic scale used for type styles.
@mixin card-typography($categories: (
    title: 'h6',
    title-small: 'subtitle-2',
    subtitle: 'subtitle-2',
    content: 'body-2')
) {
    $title: map.get($categories, 'title');
    $title-small: map.get($categories, 'title-small');
    $subtitle: map.get($categories, 'subtitle');
    $content: map.get($categories, 'content');

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

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

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

    %igx-card-content > *:not(igx-icon) {
        @include type-style($content) {
            margin: 0;
        }
    }
}