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

///
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
/// @param {Color} $background [null] - The card background color.
/// @param {Color} $outline-color [null] - The color of the outline for outlined type cards.
/// @param {Color} $header-text-color [null] - The text color of the card title.
/// @param {Color} $subtitle-text-color [null] - The text color of the card subtitle.
/// @param {Color} $content-text-color [null] - The text color of the card content.
/// @param {Color} $actions-text-color [null] - The text color of the card buttons.
/// @param {box-shadow} $resting-shadow [null] - The shadow of the card in its resting state.
/// @param {box-shadow} $hover-shadow [null] - The shadow of the card in its hover state.
///
/// @param {List} $border-radius [null] - The border radius used for card component.
///
/// @requires $light-material-schema
///
/// @example scss Change the background and content text colors in card
///   $my-card-theme: card-theme($background: #fff);
///   // Pass the theme to the css-vars() mixin
///   @include css-vars($my-card-theme);
@function card-theme(
    $schema: $light-material-schema,

    $border-radius: null,
    $background: null,
    $outline-color: null,
    $header-text-color: null,
    $subtitle-text-color: null,
    $content-text-color: null,
    $actions-text-color: null,
    $resting-shadow: null,
    $hover-shadow: null,
) {
    $name: 'igx-card';
    $card-schema: ();

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

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

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

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

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

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

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

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

    @return extend($theme, (
        name: $name,
        background: $background,
        outline-color: $outline-color,
        border-radius: $border-radius,
        header-text-color: $header-text-color,
        subtitle-text-color: $subtitle-text-color,
        content-text-color: $content-text-color,
        actions-text-color: $actions-text-color,
        resting-shadow: $resting-shadow,
        hover-shadow: $hover-shadow,
        theme: map.get($schema, '_meta', 'theme'),
        _meta: map.merge(if($meta, $meta, ()), (
            variant: map.get($schema, '_meta', 'theme')
        )),
    ));
}

/// Card Component
/// @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', 'variant');
    $not-material-theme: $variant != 'material';

    $card-heading-padding: rem(16px, 16px);
    $card-content-padding: rem(16px);
    $card-actions-padding: rem(8px);

    $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-avatar {
            --ig-size: #{if($variant == 'indigo', 3, 1)};
        }
    }

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

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

        @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-content: flex-start;
        width: 100%;
        padding: $card-heading-padding;
        color: var-get($theme, 'header-text-color');

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

        @if $variant == 'fluent' {
            padding: rem(16px) rem(8px);
        }
    }

    %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 {
        align-self: flex-start;
        margin-inline-end: rem(16px);

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

        &: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: $card-content-padding;
        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 {
        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 {
            @if $variant == 'bootstrap' {
                padding-block: rem(16px) rem(24px);
                padding-inline: rem(24px);
            }
        }

        %igx-card-actions {
            padding: rem(16px);
        }
    }

    @if $variant == 'indigo' {
        %igx-card-content,
        %igx-card-actions {
            padding: rem(16px);
        }

        %igx-card-content + %igx-card-actions {
            padding-block-start: rem(8px);
        }

        %igx-card-header + %igx-card-content {
            padding-block-start: 0;
        }
    }

    %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;
        color: var-get($theme, 'actions-text-color');
        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--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;
        }
    }
}