<template>
  <div class="h-[174px] bg-white rounded-lg border border-[#eef2f6] shadow-[0_1px_0_rgba(0,0,0,0.03)] p-4 mt-2 flex flex-col justify-between">
      <textarea
        rows="2"
        placeholder="给我发布或者布置任务"
        class="flex-1 resize-none outline-none text-sm"
        :value="modelValue"
        @input="onInput"
        @keydown.enter="onKeydownEnter"
      />

      <div class="flex justify-between items-end">
        <button @click="onAttach">
          <RiLink />
        </button>
        <button class="w-12 h-12 bg-[#F5F7FA] px-2.5 py-1.5 rounded-md flex items-center justify-center" @click="onSend">
          <RiStopFill v-if="isSendingMessage" />
          <RiSendPlaneFill v-else />
        </button>
      </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import { RiLink, RiSendPlaneFill, RiStopFill } from '@remixicon/vue'

const props = defineProps({
  modelValue: { type: String, default: '' },
  isSendingMessage: { type: Boolean, default: false },
})

const emit = defineEmits(['update:modelValue', 'send', 'attach'])

const onInput = (e: Event) => {
  const v = (e.target as HTMLTextAreaElement).value
  emit('update:modelValue', v)
}

const onKeydownEnter = (e: KeyboardEvent) => {
  if ((e as KeyboardEvent).shiftKey) return
  e.preventDefault()
  emit('send')
}

const onAttach = () => emit('attach')
const onSend = () => emit('send')
</script>