<script>
    import { currentUser } from '../store';
    import { deleteMessage } from '../apiServer';

    export let at;
    export let sender;
    export let message;

    let timestamp = new Date(at).toTimeString();

    function handleDeleteMessage() {
        deleteMessage(message.id);
    }
</script>

<div class="hover:bg-zinc-300 flex flex-row">
    <div class="sender basis-20 text-right mr-1">
        @{sender.name}:
    </div>
    <div class="body grow">
        {message.body}
    </div>
    <div class="timestamp basis-6">
        <!-- TODO: this is too long and looks awful. -->
        <!-- {timestamp} -->
    </div>
    {#if sender.id === $currentUser?.id}
        <div class="controls basis-1 hidden relative -top-3 rounded-md border-2 border-slate-600 px-1 bg-slate-300">
            <button on:click|preventDefault={handleDeleteMessage}>&#x1F5D1;</button>
        </div>
    {/if}
</div>

<style>
    div:hover .controls {
        display: block;
    }
</style>
