import { View } from "@tarojs/components"
import IconMic from "@/components/icon/IconMic"
import IconStop from "@/components/icon/IconStop"
import IconSend from "@/components/icon/IconSend"
import { useState } from "react";
// import WemetaInput from '@/components/wemeta-input'
import WemetaTextarea from '@/components/wemeta-textarea'
import { useTextChat } from "@/store/textChatStore";
interface Props {
  disabled: boolean,
  onIconClick: () => void
  onSend: (msg: string)=> void
}
export default ({disabled, onIconClick, onSend}:Props) => {
  const [value, setValue] = useState('')
  const {messageStopHandle} = useTextChat()

  const handleInput = (value: string)=> {
    setValue(value)
  }
  const handleConfirm = ()=> {
    console.log(value)
    if(!value.length){
      return;
    }
    onSend(value)
    setValue('')
  }
  const handleStopClick = ()=> {
    messageStopHandle?.()
  }

  const renderExtra = () => {
    // IOS Textarea 高度最小只能是 34px, 高度无法再缩小，所以添加一个高度 34 在同一行中高度居中显示
    return <View className="flex items-center gap-12 leading-34 h-34">
        {!value.length && <View className="flex-center" onClick={onIconClick}><IconMic /></View>}
        {!messageStopHandle &&  <View className={`flex-center ${!!value.length ? '':'opacity-50'}`} onClick={handleConfirm}><IconSend /></View>}
        {!!messageStopHandle && <View className="flex-center" onClick={handleStopClick}><IconStop /></View>}
    </View>
  }
  return <View className="flex flex-col gap-12">
      <WemetaTextarea
      	adjustPosition={false}
        disabled={disabled}
        style={{'borderRadius': '10px', maxHeight: '120px', 'lineHeight': '24px'}}
        autoHeight
        placeholder="有问题尽管问我..."
        value={value}
        cursorSpacing={400}
        // onConfirm={handleConfirm}
        suffix={renderExtra}
        onInput={(value: any) => handleInput(value)}
        >
      </WemetaTextarea>
  </View>
}
