////
/// @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} $palette [$default-palette] - The palette used as basis for styling the component.
/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
/// @param {Map} $elevations [$elevations] - The elevations (shadows) map to be used.
/// @param {Color} $background [null] - The card background color.
/// @param {Color} $outline-color [null] - The color of the outline for outlined type cards.
/// @param {Color} $card-border-color [null] - The color of the card border.
/// @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 {border-radius} $border-radius [null] - The border radius used for card component.
///
/// @requires $default-palette
/// @requires $light-schema
/// @requires apply-palette
/// @requires extend
/// @requires text-contrast
/// @requires igx-elevation
/// @requires $elevations
/// @requires round-borders
///
/// @example scss Change the background and content text colors in card
///   $my-card-theme: igx-card-theme(
///     $background: #fff,
///     $content-text-color: rgba(0, 0, 0, .8)
///   );
///   // Pass the theme to the igx-card component mixin
///   @include igx-card($my-card-theme);
@function igx-card-theme(
    $palette: $default-palette,
    $schema: $light-schema,
    $elevations: $elevations,

    $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,
    $card-border-color: null
) {
    $name: 'igx-card';
    $card-schema: ();

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

    $theme: apply-palette($card-schema, $palette);

    $border-radius: round-borders(
        if($border-radius, $border-radius, map-get($card-schema, 'border-radius')),0 ,24px
    );

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

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

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

    @if not($subtitle-text-color) and $background {
        @if 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: igx-elevation($elevations, $resting-elevation);
    }

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

    @return extend($theme, (
        name: $name,
        palette: $palette,
        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,
        card-border-color: $card-border-color
    ));
}

/// Card Component
/// @param {Map} $theme - The theme used to style the component.
/// @requires {mixin} igx-root-css-vars
/// @requires em
/// @requires --var
@mixin igx-card($theme) {
    @include igx-root-css-vars($theme);

    $card-title-fz: em(24px, 16px);
    $card-title-line-height: em(24px, 16px);
    $card-subtitle-line-height: em(24px, 16px);
    $card-content-fz: em(14px, 16px);
    $card-content-lh: (20px, 16px);

    $card-heading-padding: em(16px, 16px);
    $card-heading-compact-padding: em(16px, 16px);
    $card-heading-margin: 0;
    $card-content-padding: em(16px, 16px);
    $card-content-margin: 0;
    $card-actions-padding: em(8px, 16px);
    $card-subtitle-margin: 0;
    $card-tgroup-margin: 0 em(16px);
    $card-transitions: box-shadow .3s cubic-bezier(.25, .8, .25, 1);
    $left: if-ltr(left, right);
    $right: if-ltr(right, left);

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

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

    %igx-card--outlined {
        box-shadow: none;
        border-color: --var($theme, 'outline-color');

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


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

    %igx-card-header {
        display: flex;
        flex: 1 1 auto;
        flex-flow: row wrap;
        align-content: flex-start;
        width: 100%;
        padding: $card-heading-padding;
        color: --var($theme, 'header-text-color');

        &:empty {
            display: none;
        }
    }

    %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-#{$right}: 0;
            margin-bottom: rem(16px);
        }
    }

    %igx-card-header--compact {
        padding: $card-heading-compact-padding;
    }

    %igx-card-header-thumbnail {
        align-self: flex-start;
        margin-#{$right}: rem(16px);

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

    %igx-card-header-title {
        margin: $card-heading-margin;
    }

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

    %igx-card-tgroup {
        margin: $card-tgroup-margin;
    }

    %igx-card-content {
        width: 100%;
        flex: 1 1 auto;
        padding: $card-content-padding;
        color: --var($theme, 'content-text-color');
    }

    %igx-card-content-text {
        margin: $card-content-margin;
    }

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

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

    %igx-card-media--right {
        width: auto;
        margin-#{$left}: auto;
        order: 9999;
    }

    %igx-card-actions {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        flex: 0 1 auto;
        align-items: center;
        padding: $card-actions-padding;

        [igxButton] ~ [igxButton] {
            margin-#{$left}: rem(8px);
        }
    }

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

        @include if-rtl() {
            order: -1;
        }
    }

    %igx-card-actions__icons {
        display: flex;
        align-items: center;
        order: 1;
        color: --var($theme, 'actions-text-color');
        margin-#{$left}: auto;

        &:empty {
            display: none;
        }
    }

    %igx-card-actions__buttons {
        display: flex;
        align-items: center;
        order: 0;

        &:empty {
            display: none;
        }
    }

    %igx-card-actions__buttons--justify,
    %igx-card-actions__icons--justify {
        justify-content: space-around;
        flex-grow: 1;

        &:empty {
            display: none;
        }
    }

    %igx-card-actions__icons--vertical,
    %igx-card-actions__buttons--vertical {
        flex-direction: column;

        [igxButton] ~ [igxButton] {
            margin-#{$left}: 0;
            margin-top: rem(8px);
        }
    }

    %igx-card-actions__icons--vertical {
        margin-top: auto;
        margin-#{$left}: 0;
    }

    %igx-card-actions__icons--reverse {
        order: 0;
        margin-#{$left}: 0;
    }

    %igx-card-actions__buttons--reverse {
        order: 1;
        margin-#{$left}: auto;
    }

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

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

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

        [igxButton] ~ [igxButton] {
            margin-#{$left}: 8px;
        }
    }

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

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

    %igx-card-actions-igroup--start {
        margin-#{$right}: auto;
    }

    %igx-card-actions-igroup--end {
        margin-#{$left}: auto;
    }
}

/// Adds typography styles for the igx-card component.
/// Uses the 'h5', 'subtitle-2' and 'body-2'
/// category from the typographic scale.
/// @group typography
/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.
/// @param {Map} $categories [(title: 'h5', title-small: 'subtitle-2', subtitle: 'subtitle-2', content: 'body-2')] - The categories from the typographic scale used for type styles.
/// @requires {mixin} igx-type-style
@mixin igx-card-typography($type-scale, $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 igx-type-style($type-scale, $title) {
            margin: 0;
        }
    }

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

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

    %igx-card-content,
    %igx-card-content > p {
        @include igx-type-style($type-scale, $content) {
            margin: 0;
        }
    }
}