import React, { Component } from 'react';
import 'script-loader!emojionearea/dist/emojionearea.js'
import 'emojionearea/dist/emojionearea.css';
import lodash from "lodash";
import classNames  from "classnames";

export default class AnterosEmojiArea extends React.Component {
    constructor(props) {
        super(props);
        this.idEmoji = lodash.uniqueId("emoji");
        this.state = { value: this.props.value };
        this.handleChange = this.handleChange.bind(this);
    }

    componentWillReceiveProps(nextProps) {
        this.state = {value: nextProps.value};
    }
    
    componentDidMount() {
        let _this = this;
        $(this.input).emojioneArea({
            events: {
                keyup: function (editor, event) {
                    if (_this.state.value != this.getText()) {
                        _this.setState({ value: this.getText() });
                        if (this_.props.onChange) {
                            this_.props.onChange(event);
                        }
                    }
                },
                keydown: function (editor, event) {
                    if (_this.state.value != this.getText()) {
                        _this.setState({ value: this.getText() });
                        if (this_.props.onChange) {
                            this_.props.onChange(event);
                        }
                    }
                },
                keypress: function (editor, event) {
                    if (_this.state.value != this.getText()) {
                        _this.setState({ value: this.getText() });
                        if (this_.props.onChange) {
                            this_.props.onChange(event);
                        }
                    }
                },
                paste: function (editor, event) {
                    if (_this.state.value != this.getText()) {
                        _this.setState({ value: this.getText() });
                        if (this_.props.onChange) {
                            this_.props.onChange(event);
                        }
                    }
                },
                emojibtn_click: function (button, event) {
                    if (_this.state.value != this.getText()) {
                        _this.setState({ value: this.getText() });
                        if (this_.props.onChange) {
                            this_.props.onChange(event);
                        }
                    }
                }

            }
        });

    }

    handleChange(event) {
        this.setState({ value: event.target.value });
        if (this.props.onChange) {
            this.props.onChange(event);
        }
    }

    render() {
        let className = classNames("form-control",
            (this.props.className ? this.props.className : ""),
            (this.props.inputGridSize ? " col-sm-" + this.props.inputGridSize : ""));

        if (this.props.id) {
            this.idEmoji = this.props.id;
        }
        let classNameLabel = classNames("control-label",(this.props.labelGridSize ? "col-sm-" + this.props.labelGridSize : ""));
        return (
            <div>
                <If condition={this.props.label!=undefined}>
                    <Then>
                        <label className={classNameLabel}>{this.props.label}</label>
                    </Then>
                </If>
                <div style={{ width: this.props.width }}>
                    <textarea maxLength={this.props.maxLenght>0?this.props.maxLength:""}
                        id={this.idEmoji}
                        disabled={(this.props.disabled ? true : false)}
                        style={{ ...this.props.style }}
                        ref={ref => this.input = ref}
                        value={this.state.value}
                        className={className}
                        onChange={this.handleChange}
                    />
                </div>
            </div>
        );
    }
}


AnterosEmojiArea.propTypes = {
    value: React.PropTypes.string.isRequired,
    placeHolder: React.PropTypes.string,
    disabled: React.PropTypes.bool,
    maxLenght: React.PropTypes.number.isRequired,
    label: React.PropTypes.string,
    inputGridSize: React.PropTypes.number,
    labelGridSize: React.PropTypes.number
};

AnterosEmojiArea.defaultProps = {
    value: '',
    maxLenght: 0
}