<script lang="ts">
    import { mdiSendVariantOutline } from "@mdi/js"
    import Icon from "../widgets/Icon.svelte"
    import type { Chat } from "./chat"
    let { chat }: { chat: Chat } = $props()
    let value = $state("")
    let textareaEl: HTMLTextAreaElement = $state(null)
    function autoResize() {
        if (textareaEl) {
            textareaEl.style.height = "auto"
            textareaEl.style.height = textareaEl.scrollHeight + "px"
        }
    }
</script>

<div class="input-row">
    <textarea
        placeholder="Schreibe eine Nachricht..."
        bind:value
        rows="1"
        bind:this={textareaEl}
        oninput={autoResize}
        onkeydown={(e) => {
            if (e.key === "Enter" && !e.shiftKey) {
                e.preventDefault()
                if (value.trim()) {
                    chat.generateResponse(value.trim())
                    value = ""
                }
            }
        }}
    ></textarea>
    <button
        class="btn"
        onclick={() => {
            if (value.trim()) {
                chat.generateResponse(value.trim())
                value = ""
            }
        }}
        aria-label="Nachricht senden"
    >
        <Icon
            path={mdiSendVariantOutline}
            size="1.4rem"
        />
    </button>
</div>

<style lang="less">
    .input-row {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        position: relative;
        textarea {
            width: 100%;
            min-height: 3.6rem;
            padding: 0.6rem;
            border-radius: 1.2rem;
            padding-bottom: 2.4rem;
            max-height: 12rem;
            line-height: 1.4rem;
            resize: none;
            overflow: hidden;
            color: white;
            &:focus {
                outline: none;
                border-top: 1px solid var(--primary-100);
            }
        }
        .btn {
            position: absolute;
            bottom: 0.6rem;
            right: 0.6rem;
            height: 2rem;
            width: 2.4rem;
            min-width: unset;
            background-color: var(--primary-100);
            border-radius: 4px;
        }
    }
</style>
