import { View } from "@tarojs/components"
import IconMic from "@/components/icon/IconMic"
import IconStop from "@/components/icon/IconStop"
import { useState } from "react";
import WemetaInput from '@/components/wemeta-input'
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 = (value: string)=> {
    console.log(value)
    if(!value.length){
      return;
    }
    onSend(value)
    setValue('')
  }
  const handleStopClick = ()=> {
    messageStopHandle?.()
  }
  const iconButton = ()=> {
    return <View className="flex items-center gap-12">
        <View className="flex-center" onClick={onIconClick}><IconMic /></View>
        {!!messageStopHandle && <View className="flex-center" onClick={handleStopClick}><IconStop /></View>}
    </View>
  }
  return <>
    
      <WemetaInput 
      	adjustPosition={false}
        disabled={disabled}
        extraStyle={{'borderRadius': '10px'}}
        confirmType="send"
        suffix={iconButton} 
        placeholder="有问题尽管问我..." 
        value={value} 
        cursorSpacing={400}
        onConfirm={handleConfirm}
        onInput={(value: any) => handleInput(value)}
        >
      </WemetaInput>
  </>
}