<script lang="ts">
 import { tick } from "svelte"
 import { send, whisper } from "./chat";

 export let input = "";
 async function keydown(e: KeyboardEvent) {
     if(e.key === "Enter") {
	 console.log(e);
	 const tokens = input.trim().split(" ");

	 if(tokens[0] === '/w') {
	     const who = tokens[1];
	     const m = tokens.slice(2).join(' ');
	     whisper(who, m);
	 } else {
	     send(input);
	 }
	 e.preventDefault();
	 await tick();
	 input = "";
     }
 }
</script>

<div class="container p-relative d-flex pa-16 pt-0">
    <textarea bind:value="{input}" on:keydown={keydown} class="input grow-1 radius-16 border-0 pa-8 bg-700 color-300" />
</div>

<style>
 .container {
     height: calc(2 * var(--message-line-height));
     margin-top: -12px;
     z-index: 100;
 }

 .container::before, .container::after {
     content: "";
     z-index: 99;
     background: linear-gradient(180deg, rgba(var(--base-800-rgb),0) 0%, rgb(var(--base-800-rgb)) 75%);
     width: 24px;
     position: absolute;
     height: 16px;
 }

 .container::before { left: 0;  }
 .container::after  { right: 0; }

 .input {
     resize: none;
     z-index: 100;
 }

 .input:focus {
     outline: none;
 }
</style>
