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

/// Dialog Theme
/// @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 dialog background color.
/// @param {Color} $title-color [null] - The dialog title text color.
/// @param {Color} $message-color [null] - The dialog message text color.
/// @param {box-shadow} $shadow [null] - The shadow used for the dialog.
/// @param {border-radius} $border-radius [null] - The border radius used for dialog 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 color
///   $my-dialog-theme: igx-dialog-theme($background: black);
///   // Pass the theme to the igx-dialog component mixin
///   @include igx-dialog($my-dialog-theme);
@function igx-dialog-theme(
    $palette: $default-palette,
    $schema: $light-schema,
    $elevations: $elevations,

    $border-radius: null,

    $background: null,
    $title-color: null,
    $message-color: null,
    $shadow: null
) {
    $name: 'igx-dialog';
    $dialog-schema: ();

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

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

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

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

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

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

    @return extend($theme, (
        name: $name,
        palette: $palette,
        border-radius: $border-radius,
        background: $background,
        title-color: $title-color,
        message-color: $message-color,
        shadow: $shadow
    ));
}

/// @param {Map} $theme - The theme used to style the component.
/// @requires {mixin} igx-root-css-vars
/// @requires rem
/// @requires --var
@mixin igx-dialog($theme) {
    @include igx-root-css-vars($theme);
    $left: if-ltr(left, right);
    $right: if-ltr(right, left);

    $dialog-min-width: map-get((
        material: rem(280px),
        fluent: rem(288px)
    ), map-get($theme, variant));

    $dialog-title-padding: map-get((
        material: rem(24px) rem(24px) rem(12px) rem(24px),
        fluent: rem(16px) rem(24px) rem(24px) rem(24px)
    ), map-get($theme, variant));

    $dialog-message-padding: map-get((
        material: rem(12px) rem(24px),
        fluent: 0 rem(24px) rem(20px) rem(24px)
    ), map-get($theme, variant));

    $dialog-actions-padding: map-get((
        material: rem(8px),
        fluent: 0 rem(24px) rem(24px) rem(24px)
    ), map-get($theme, variant));

    %igx-dialog-display {
        outline-style: none;
    }

    %igx-dialog--hidden {
        display: none;
    }

    %igx-dialog-window {
        position: relative;
        min-width: $dialog-min-width;
        border-radius: --var($theme, 'border-radius');
        background: --var($theme, 'background');
        box-shadow: --var($theme, 'shadow');
        overflow: hidden;

        .igx-calendar {
            width: rem(320px);
        }

        .igx-calendar--vertical {
            width: rem(496px);
        }
    }

    %igx-dialog-title {
        color: --var($theme, 'title-color');
        padding: $dialog-title-padding;
    }

    %igx-dialog-content {
        color: --var($theme, 'message-color');
        max-width: 40ch;
        padding: $dialog-message-padding;
    }

    %igx-dialog-actions {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
        padding: $dialog-actions-padding;

        button + button {
            margin-#{$left}: rem(8px);
        }
    }
}

/// Adds typography styles for the igx-dialog component.
/// Uses the 'h6' and 'body-1' category from the typographic scale.
/// @group typography
/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.
/// @param {Map} $categories [(title: 'h6', content: 'body-1')] - The categories from the typographic scale used for type styles.
/// @requires {mixin} igx-type-style
@mixin igx-dialog-typography($type-scale, $categories: (
    title: 'h6',
    content: 'body-1')
) {
    $title: map-get($categories, 'title');
    $content: map-get($categories, 'content');

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

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