<script>import { BEM } from "../../models/BEM";
import Alert from "../atoms/Alert.svelte";
const bm = new BEM('UI-Messages');
bm.append($$props.class);
export let messages = [];
export let timeout = 3000;
const template = (message, options = {}) => {
    return {
        id: new Date().getTime(),
        message,
        ...options,
    };
};
export let messageAppend = (message, options = {}) => {
    const data = template(message, options);
    messages = [data, ...messages];
};
export let actions = {
    call: (message, options = {}) => {
        messageAppend(message, options);
    },
    onClose: (id) => {
        messages = messages.filter(i => i.id != id);
    }
};
</script>

<div class={bm.toString()} style={$$props.style}>
	{#each messages as message(message.id)}
		<Alert on:close={() => actions.onClose(message.id)} isCloseable {timeout} {...message}/>
	{/each}
</div>

<style>.UI-Messages {
  position: fixed;
  right: 20px;
  top: 20px;
  pointer-events: none;
}</style>
