<template>
    <div class="c-message">
        <!--Uses flex-row -->
        <div class="c-message__icon"
             :class="['u-icon-bg-color-' + iconClass]"></div>
        <div class="c-message__text">
            <!-- Uses flex-column -->
            <div class="c-message__title"
                 v-if="title">
                {{title}}
            </div>

            <div class="c-message__hint"
                 v-if="hint">
                {{hint}}
                <span v-if="timestamp">[{{timestamp}}]</span>
            </div>

            <div class="c-message__action-text"
                 v-if="message">
                {{message}}
            </div>
        </div>
    </div>
</template>

<style lang="scss">
    @import "~styles/sass-base";

    @mixin legacyMessage() {
        flex: 0 1 auto;
        font-family: symbolsfont;
        font-size: $messageIconD; // Singleton message in a dialog
        margin-right: $interiorMarginLg;
    }

    .c-message {
        display: flex;
        align-items: center;

        > * + * {
            margin-left: $interiorMarginLg;
        }

        &__icon {
            // Holds a background SVG graphic
            $s: 50px;
            flex: 0 0 auto;
            min-width: $s;
            min-height: $s;
        }

        &__text {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;

            > * + * {
                margin-top: $interiorMargin;
            }
        }

        // __text elements
        &__title,
        &__action-text {
            font-size: 1.2em; // TEMP
        }

        &--simple {
            // Icon and text elements only
            &:before {
                font-size: 30px !important;
            }

            [class*='__text'] {
                font-size: 1.25em;
            }
        }

        /************************** LEGACY */
        &.message-severity-info:before {
            @include legacyMessage();
            content: $glyph-icon-info;
            color: $colorInfo;
        }

        &.message-severity-alert:before {
            @include legacyMessage();
            content: $glyph-icon-alert-rect;
            color: $colorWarningLo;
        }

        &.message-severity-error:before {
            @include legacyMessage();
            content: $glyph-icon-alert-triangle;
            color: $colorWarningLo;
        }

        // Messages in a list
        .c-overlay__messages & {
            padding: $interiorMarginLg;
            &:before {
                font-size: $messageListIconD;
            }
        }
    }
</style>

<script>
export default {
    inject:['iconClass', 'title', 'hint', 'timestamp', 'message']
}
</script>
