import React from 'react';
import PropTypes from 'prop-types';

import { MessageType } from './Types';

import Icon from './Icon';
import Button from './Button';

import UploadButton from './UploadButton';

export default class MessageInput extends React.Component {
    constructor(props) {
        super(props);
        this.textarea = React.createRef();
        this.fileinput = React.createRef();
        this.state = {
            isActive: false,
            mid: this.props.data.mid,
            rid: this.props.data.rid || 0,
            to: this.props.data.to || {},
            body: this.props.text || '',
            attach: ''
        };
    }

    handleCtrlEnter = (event) => {
        if (event.ctrlKey && (event.charCode == 10 || event.charCode == 13)) {
            this.onSubmit({});
        }
    }

    onSubmit = (event) => {
        if (event.preventDefault) {
            event.preventDefault();
        }
        const input = this.fileinput.current;
        this.props.onSend({
            mid: this.state.mid,
            rid: this.state.rid,
            body: this.state.body,
            attach: this.state.attach ? input.files[0] : '',
            to: this.state.to
        });
        this.setState({
            body: '',
            attach: ''
        });
        this.textarea.current.style.height = '';
    }

    componentDidMount() {
        const isDesktop = window.matchMedia('(min-width: 62.5rem)');
        if (isDesktop.matches) {
            this.textarea.current.focus();
        }
    }
    textChanged = (event) => {
        this.setState({
            body: event.target.value
        });
        const el = this.textarea.current;
        const offset = el.offsetHeight - el.clientHeight;
        const height = el.scrollHeight + offset;
        el.style.height = `${height + offset}px`;
    }
    uploadValueChanged = (attach) => {
        this.setState({
            attach: attach
        });
    }
    render() {
        return (
            <form className="msg-comment-target">
                <div style={commentStyle}>
                    <textarea name="body" onChange={this.textChanged} onKeyPress={this.handleCtrlEnter}
                        ref={this.textarea} style={textInputStyle} value={this.state.body}
                        rows={this.props.rows || '1'} placeholder={this.props.children} />
                    <div style={inputBarStyle}>
                        <UploadButton inputRef={this.fileinput} value={this.state.attach} onChange={this.uploadValueChanged} />
                        <Button onClick={this.onSubmit}><Icon name="ei-envelope" size="s" />Send</Button>
                    </div>
                </div>
            </form>
        );
    }
}

const commentStyle = {
    display: 'flex',
    flexDirection: 'column',
    width: '100%',
    marginTop: '10px'
};

const inputBarStyle = {
    display: 'flex',
    borderTop: '1px #eee solid',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: '3px'
};

const textInputStyle = {
    overflow: 'hidden',
    resize: 'none',
    display: 'block',
    boxSizing: 'border-box',
    border: 0,
    outline: 'none',
    padding: '4px'
};

MessageInput.propTypes = {
    children: PropTypes.node,
    data: MessageType.isRequired,
    onSend: PropTypes.func.isRequired,
    rows: PropTypes.string,
    text: PropTypes.string
};