import React, {useState} from 'react';
import {useDebounce} from 'use-debounce';
import {size, trim} from 'lodash/fp';
import {useDispatch, useSelector} from 'react-redux';
import { postThreadContent } from '../../middlewares/thread-contents';
import {getCurrentThreadId} from '../../../selectors/thread';

const ChatInput = () => {
  const dispatch = useDispatch();
  const [inputValue, setInputValue] = useState('');
  const [message] = useDebounce(trim(inputValue), 300);
  const isBlankMessage = size(message) === 0;
  const submitDisabled = isBlankMessage;
  const threadId = useSelector(getCurrentThreadId);
  const handleSubmit = () => {
    dispatch(postThreadContent({threadId, message: inputValue}));
  };
  const handleInputChange = (value: string) => {
    setInputValue(value);
    return value;
  };

  return (
    <div className='chat-input-container'>
      <form onSubmit={handleSubmit}>
      <div className='collapse row align-middle mb-1'>
        <div className='auto columns'>
          <textarea placeholder={`What's on your mind?`} onChange={({target}) => handleInputChange(target.value)} />
        </div>
        {/* DZ */}
        <div className='shrink columns'>
          {/* TODO: Insert <Dropzone>*/}
          <button data-tip data-for='attachment-criteria' className='button secondary hollow large clear pull-left'>
            <i className='fa fa-paperclip'/>
          </button>
          {/* TODO: Insert <ReactTooltip>*/}
          <button disabled={submitDisabled} type='button' onClick={handleSubmit} className='button success hollow large clear pull-right'>
            <i className='fa fa-paper-plane'/>
          </button>
        </div>
      </div>
      </form>
    </div>
  );
};

export default ChatInput;