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

import { MessageType } from './Types';

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

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: '',
            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: ''
        })
    }

    componentDidMount() {
        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`;
    }
    attachmentChanged = (event) => {
        this.setState({
            attach: event.target.value
        })
    }
    openfile = () => {
        const input = this.fileinput.current;
        if (this.state.attach) {
            this.setState({
                attach: ''
            })
        } else {
            input.click()
        }
    }
    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}>
                        <div style={this.state.attach ? activeStyle : inactiveStyle}
                            onClick={this.openfile}>
                            <Icon name="ei-camera" size="s" />
                            <input type="file" accept="image/jpg,image/png" onClick={e => e.stopPropagation()}
                                style={{ display: 'none' }} ref={this.fileinput} value={this.state.attach}
                                onChange={this.attachmentChanged} />
                        </div>
                        <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 inactiveStyle = {
    cursor: 'pointer',
    color: '#888'
};
const activeStyle = {
    cursor: 'pointer',
    color: 'green'
};

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',
    resize: 'none'
}

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