<script>
    import Icon from "../utils/Icon.svelte";

    export let type;
    export let content;
    export let raw = false;
    export let discreet = false;
    export let sticky = false;

    let icon = undefined;
    switch (type) {
        case 'success':
            icon = 'check';
            break;
        case 'info':
            icon = 'info';
            break;
        case 'warning':
            icon = 'alert-triangle';
            break;
        case 'error':
            icon = 'x-circle';
            break;
        case 'error-alert':
            icon = 'alert-circle';
            break;
    }

    let message;

    function hide() {
        message.remove();
    }
</script>

<style lang="scss">
	@import "../../scss/vars";

	.message {
		display: flex;
		flex-direction: row;
		align-items: center;

		padding: 8px 16px;

		border-radius: 5px;

		:global(.icon) {
			--icon-size: 24px;
			margin-right: 8px;
		}

		&:not(&-discreet) {
			background-color: rgba(255, 255, 255, 0.33);

			&[data-type=info], &[data-type=question] {
				color: var(--on-info);
				background-color: var(--info);
			}

			&[data-type=success] {
				color: var(--on-success);
				background-color: var(--success);
			}

			&[data-type=warning] {
				color: var(--on-warning);
				background-color: var(--warning);
			}

			&[data-type=error], &[data-type=error-alert] {
				color: var(--on-error);
				background-color: var(--error);
			}
		}

		&-discreet {
			color: var(--on-surface);

			.icon {
				--icon-size: 20px;
			}
		}

		.content {
			flex-grow: 1;
		}

		button {
			background-color: transparent;
			color: inherit;
			margin: 0;
			padding: 0;

			border: 0;

			:global(.icon) {
				margin: 0;
			}
		}
	}
</style>


<div class="message" class:message-discreet={discreet} data-type="{type}" bind:this={message}>
    {#if icon}
        <Icon name={icon}/>
    {/if}

    <span class="content">
        {#if raw}
            {@html content}
        {:else}
            {content}
        {/if}
    </span>

    {#if !sticky}
        <button type="button" on:click={hide}>
            <Icon name="x"/>
        </button>
    {/if}
</div>
