<script>
    import { activeChannel, events } from '../store';
    import Message from './Message.svelte';

    let container;
    $: messages = $events.filter(
        (ev) => (
            ev.type === 'message'
            && $activeChannel !== null
            && ev.channel.id === $activeChannel.id
        )
    );

    // TODO: eventually, store scroll height/last unread in channel? scroll there?

    let scroll = (message) => {
        message.scrollIntoView();
    }
</script>

<div class="container" bind:this={container}>
    {#each messages as message}
        <div use:scroll>
            <Message {...message} />
        </div>
    {/each}
</div>

<style>
    .container {
        overflow: scroll;
    }
</style>
