<script lang="ts">
    import LL from "../../i18n/i18n-svelte";
    import { chatMessagesStore, chatInputFocusStore } from "../../Stores/ChatStore";

    export const handleForm = {
        blur() {
            inputElement.blur();
        },
    };
    let inputElement: HTMLElement;
    let newMessageText = "";

    function onFocus() {
        chatInputFocusStore.set(true);
    }
    function onBlur() {
        chatInputFocusStore.set(false);
    }

    function saveMessage() {
        if (!newMessageText) return;
        chatMessagesStore.addPersonnalMessage(newMessageText);
        newMessageText = "";
    }
</script>

<form on:submit|preventDefault={saveMessage}>
    <input
        class="nes-input is-dark" 
        type="text"
        bind:value={newMessageText}
        placeholder={$LL.chat.enter()}
        on:focus={onFocus}
        on:blur={onBlur}
        bind:this={inputElement}
    />
    <button class="nes-btn" type="submit">
        <img src="/static/images/send.png" alt="Send" width="20" />
    </button>
</form>

<style lang="scss">
    form {
        display: flex;
        padding-left: 4px;
        padding-right: 4px;
    }
</style>
