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

////
/// @group themes
/// @access public
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
////

/// If only background color is specified, text/icon color
/// will be assigned automatically to a contrasting color.
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
///
/// @param {Color} $banner-background [null] - The color used for the banner background.
/// @param {Color} $banner-message-color [null] - The color used for the banner label.
/// @param {Color} $banner-border-color [null] - The color used for the banner border.
/// @param {Color} $banner-illustration-color [null] - The color used for the banner illustration.
/// @param {Number} $border-radius [null] - The border-radius for the banner.
///
/// @requires $light-material-schema
///
/// @example scss Change the background in banner
///   $my-banner-theme: banner-theme($banner-background: #000);
///   // Pass the theme to the css-vars() mixin
///   @include css-vars($my-banner-theme);
@function banner-theme(
    $schema: $light-material-schema,
    $banner-background: null,
    $banner-message-color: null,
    $banner-border-color: null,
    $banner-illustration-color: null,
    $border-radius: null,
) {
    $name: 'igx-banner';
    $selector: 'igx-banner, .igx-banner';
    $banner-schema: ();

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

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

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

    @return extend($theme, (
        name: $name,
        selector: $selector,
        banner-background: $banner-background,
        banner-message-color: $banner-message-color,
        banner-border-color: $banner-border-color,
        banner-illustration-color: $banner-illustration-color,
        border-radius: $border-radius,
        theme: map.get($schema, '_meta', 'theme'),
        _meta: map.merge(if($meta, $meta, ()), (
            variant: map.get($schema, '_meta', 'theme')
        )),
    ));
}

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

    %igx-banner-host {
        igx-expansion-panel-body {
            padding: 0;
        }
    }

    %igx-banner__actions,
    %igx-banner__actions > igx-banner-actions,
    %igx-banner__illustration,
    %igx-banner__message {
        display: flex;
    }

    %igx-banner__illustration,
    %igx-banner__message {
        align-items: center;
    }

    %igx-banner {
        @include sizable();
        --component-size: var(--ig-size, var(--ig-size-large));

        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: rem(8px);
        padding: rem(16px) rem(8px);
        min-width: rem(320px);
        background: var-get($theme, 'banner-background');
        box-shadow: inset 0 rem(-1px) 0 0 var-get($theme, 'banner-border-color');
        border-radius: var-get($theme, 'border-radius');

        @if $variant == 'indigo' {
            box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'banner-border-color');
            padding: rem(16px);
        }

        igc-icon,
        igx-icon,
        igc-button,
        [igxButton] {
            --component-size: var(--ig-size, var(--ig-size-large));

            @if $variant == 'indigo' {
                --component-size: var(--ig-size, var(--ig-size-medium));
            }
        }
    }

    %igx-banner__illustration {
        justify-content: center;
        color: var-get($theme, 'banner-illustration-color');
    }

    %igx-banner__text {
        color: var-get($theme, 'banner-message-color');
        flex: 1 0 0%;

        > * {
            margin-block-start: 0 !important;
        }
    }

    %igx-banner__message {
        min-width: rem(150px);
        flex: 1 0 0%;
        gap: rem(16px);

        @if $variant == 'indigo' {
            gap: rem(8px);
        } @else {
            padding: 0 rem(8px);
        }
    }

    %igx-banner__actions,
    %igx-banner__actions > igx-banner-actions {
        flex-wrap: wrap;
        align-self: flex-end;
        gap: rem(8px);

        > a {
            display: inline-flex;
            align-items: center;
        }
    }
}

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

    %igx-banner__text {
        @include type-style($message) {
            margin-block-start: 0;
            margin-block-end: 0;
        }
    }
}