import { FC, useState, useRef } from 'react'
import Textarea from './Textarea';
import IcoButton from '../../UI/IcoButton';
import { BsMic } from '@react-icons/all-files/bs/BsMic';
import { VscSend } from '@react-icons/all-files/vsc/VscSend';
import {BsEmojiSmile} from '@react-icons/all-files/bs/BsEmojiSmile';
import {ImAttachment} from '@react-icons/all-files/im/ImAttachment';
import EmojiPicker from '../../UI/EmojiPicker';

const SendMessage: FC = () => {
    const ref = useRef<HTMLButtonElement>(null);
    const [msg, setMsg] = useState<string>('');
    const [pickerActive, setPickerActive] = useState<boolean>(false);
    
    return (
        <div className='bg-gray-800 border-l-2 flex relative items-center h-auto justify-between border-gray-700 px-12 p-2'>
            <div className="flex items-center">
                <IcoButton ref={ref} onClick={()=> {pickerActive ? setPickerActive(false) : setPickerActive(true)}} icon={<BsEmojiSmile/>} className='!px-3 !py-2'/>
                <EmojiPicker button={ref.current} msg={msg} setMsg={setMsg} active={pickerActive} setActive={setPickerActive}/>
                <IcoButton icon={<ImAttachment/>} className='!px-3 !py-2'/>
            </div>
            <Textarea msg={msg} setMsg={setMsg}/>
            {msg
            ?
            <IcoButton icon={<VscSend/>}/>   
            :
            <IcoButton icon={<BsMic/>}/>
            }
        </div>
    )
}

export default SendMessage;