<template>
  <FlexCol>
    <slot name="header" />
    <FlexRow
      position="relative" 
      border="1px solid #e0e0e0" 
      :radius="30"
      :padding="20"
      :margin="20"
      align="center"
    >
      <slot v-if="isSelectMode" name="mulitSelectMode" />
      <template v-else>
        <IconButton 
          :icon="isVoiceMode ? 'keyboard-9' : 'voice'"
          :innerStyle="{
            borderRadius: '50%',
            padding: '10rpx',
          }"
          @click="isVoiceMode = !isVoiceMode"
        />
        <view 
          v-if="isVoiceMode"
          :style="{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            flex: 1,
            background: isRecording ? '#000' : '',
          }"
          @touchstart="handleTouchStart"
          @touchend="handleTouchEnd"
        >
          <text v-if="isRecording" style="color: #fff;">松开 发送</text>
          <text v-else>按住 说话</text>
        </view>
        <textarea 
          v-else
          class="input"
          v-model="input"
          placeholder="给智能助手提问题，交流灵感..."
          auto-height
          confirm-type="send"
          style="flex: 1;"
        >
        </textarea>
        <IconButton 
          v-if="props.chatInterfaceManager.uploadAttachment"
          icon="picture"
          :loading="props.chatManager.isLoading.value"
          :innerStyle="{
            borderRadius: '50%',
            padding: '10rpx',
          }"
          @click="props.chatInterfaceManager.uploadAttachment()"
        />
        <IconButton 
          icon="navigation"
          :touchable="Boolean(input)"
          :loading="props.chatManager.isLoading.value"
          :innerStyle="{
            backgroundColor: '#000',
            borderRadius: '50%',
            padding: '10rpx',
          }"
          color="white"
          @click="handleSend"
        />
      </template>
    </FlexRow>
  </FlexCol>
</template>

<script setup lang="ts">
import IconButton from '@/components/basic/IconButton.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import { ref } from 'vue';
import type { ChatInterfaceManager, ChatManager } from '../core/Chat';
import { useChatSelectionChild } from '../composables/useChatSelection';
import { useChatRecordInput } from '../composables/useChatRecordInput';
import { toast } from '@/components/utils/DialogAction';
import FlexCol from '@/components/layout/FlexCol.vue';

const props = defineProps<{
  chatManager: ChatManager;
  chatInterfaceManager: ChatInterfaceManager;
}>();


const input = ref('');

const isVoiceMode = ref(false);
const { isSelectMode } = useChatSelectionChild();
const { 
  isRecording,
  handleTouchEnd,
  handleTouchStart
} = useChatRecordInput({
  onRecognize: (text: string) => {
    if (text.trim()) {
      props.chatManager.send(text);
    } else {
      toast('你似乎没说什么，请重新说一遍');
    }
  },
  onError: (error: any) => {
    toast('识别失败 ' + error);
  },
});

function handleSend() {
  if (isSelectMode.value) {
    return;
  }
  props.chatManager.send(input.value);
  input.value = '';
}
</script>