import React from 'react';
import classNames from 'classnames/dedupe';
import {autobind} from 'core-decorators';

import {ScrollArea}  from 'js/components/lib';

import log from 'js/utils/log';

import {classname} from 'js/ENUM';
import {signal} from 'js/events/EventEmitter';

import ChatInput from 'components/FormInput/ChatInput';

import ConversationActions from 'js/flux/actions/ConversationActions';

class ChatTabComposer extends React.Component {

  state = {
    inputHeight: 77
  };

  static defaultProps = {
    inputKeyDown: () => {},
    keyBindingFn: () => {},
    onBeforeInput: () => {},
    onBlur: () => {},
    onEscape: () => {},
    onFoucus: () => {},
    onTab: () => {},
    placeholder: 'Typing messsage ...',
    uploadPhotoFn: () => {},
  };

  @autobind
  handleResize(event) {
    let {inputHeight} = this.state;

    this.setState({inputHeight: inputHeight});
  }

  @autobind
  handleInputKeyDown(event) {
    if (event.target.textContent.length === 0 && event.shiftKey === false && event.keyCode === 13) {
      event.preventDefault();
      return;
    }

    let {conversation_id} = this.props;

    if (event.target.textContent.length !== 0 && event.shiftKey === false && event.keyCode === 13) {
      let {messageType} = this.props;
      let type = messageType();

      var text = event.target.innerText;
      //var text1 = unescape(text);
      ConversationActions.sendMessage({conversation_id: conversation_id, content: text, type});

      event.preventDefault();
      event.target.innerHTML = '';
    }
  }

  handleScroll({realHeight, containerHeight, topPosition}) {
    //console.log('------realHeight-----',realHeight);
    //console.log('------containerHeight-----',containerHeight);
  }

  @autobind
  handleClick() {
    this.setFocus();
  }

  setFocus() {
    this.refs.chatinput.setFocus();
  }

  render() {

    let {conversation_id} = this.props;

    let scrollbarStyles = {borderRadius: 5};
    let divStyle = {minHeight: this.state.inputHeight, maxHeight: '77px'};
    return (
      <ScrollArea 
        className="area"
        contentClassName="content"
        verticalScrollbarStyle={scrollbarStyles}
        verticalContainerStyle={scrollbarStyles}
        horizontalScrollbarStyle={scrollbarStyles}
        horizontalContainerStyle={scrollbarStyles}
        minScrollSize={30}
        onScroll={this.handleScroll}
        style={divStyle}
        ref='_scrollArea'
      >
        <div onClick={this.handleClick}>
          <div className={classname.chatTabComposer}>
            <ChatInput inputKeyDown={this.handleInputKeyDown} onBlur={this.props.onBlur} resizeFn={this.handleResize} ref='chatinput'/>
          </div>
        </div>
      </ScrollArea>
      
    );
  }
}

export default ChatTabComposer;