import React from 'react';

import { MessageType } from './Types';

export default class MessageInput extends React.Component {
    constructor(props) {
        super(props)
        this.resize = this.resize.bind(this);
        this.textarea = React.createRef();
    }
    componentDidMount() {
        this.resize()
    }
    resize() {
        const el = this.textarea.current;
        const offset = el.offsetHeight - el.clientHeight;
        const height = el.scrollHeight + offset;
        el.style.height = `${height + offset}px`;
    }
    render() {
        const msg = this.props.data;
        return (
            <form className="msg-comment-target">
                <input type="hidden" name="mid" value={msg.mid} />
                <div className="msg-comment">
                    <div className="ta-wrapper">
                        <textarea name="body" onChange={this.resize}
                            ref={this.textarea} style={textInputStyle}
                            rows="3" placeholder="Write a comment..." />
                    </div>
                </div>
            </form>
        )
    }
}

const textInputStyle = {
    overflow: 'hidden',
    resize: 'none',
    display: 'block',
    boxSizing: 'border-box'
}

MessageInput.propTypes = {
    data: MessageType
};