import React, { useState, useEffect, useRef } from 'react';

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

import UploadButton from './UploadButton';


/**
 * StackOverflow-driven development: https://stackoverflow.com/a/10158364/1097384
 * @param {HTMLTextAreaElement} el
 */
function moveCaretToEnd(el) {
    if (typeof el.selectionStart == 'number') {
        el.selectionStart = el.selectionEnd = el.value.length;
    // @ts-ignore
    } else if (typeof el.createTextRange != 'undefined') {
        el.focus();
        // @ts-ignore
        var range = el.createTextRange();
        range.collapse(false);
        range.select();
    }
}

/**
 * @typedef {Object} MessageInputProps
 * @property {string} text
 * @property {import('../api').Message=} data
 * @property {function} onSend
 * @property {number=} rows
 * @property {string} children
 */

/**
 * MessageInput
 * @param {React.ReactNode & MessageInputProps} props
 */
export default function MessageInput({ text, data, rows, children, onSend }) {
    /**
     * @type {React.MutableRefObject<HTMLTextAreaElement>}
     */
    let textareaRef = useRef();
    /**
     * @type {React.MutableRefObject<HTMLInputElement>}
     */
    let fileinput = useRef();

    let updateFocus = () => {
        const isDesktop = window.matchMedia('(min-width: 62.5rem)');
        if (isDesktop.matches) {
            textareaRef.current.focus();
            moveCaretToEnd(textareaRef.current);
        }
    };
    useEffect(() => {
        textChanged({
            target: {
                value: text
            }
        });
        updateFocus();
    }, [text]);

    let [body, setBody] = useState(text);

    let handleCtrlEnter = (event) => {
        if (event.ctrlKey && (event.charCode == 10 || event.charCode == 13)) {
            onSubmit({});
        }
    };
    const textChanged = (event) => {
        setBody(event.target.value);
        const el = textareaRef.current;
        const offset = el.offsetHeight - el.clientHeight;
        const height = el.scrollHeight + offset;
        el.style.height = `${height + offset}px`;
    };
    const [attach, setAttach] = useState('');
    let uploadValueChanged = (attach) => {
        setAttach(attach);
    };
    let onSubmit = (event) => {
        if (event.preventDefault) {
            event.preventDefault();
        }
        const input = fileinput.current;
        onSend({
            mid: data.mid,
            rid: data.rid || 0,
            body: body,
            attach: attach ? input.files[0] : '',
            to: data.to || {}
        });
        setAttach('');
        setBody('');
        textareaRef.current.style.height = '';
        updateFocus();
    };
    return (
        <form className="msg-comment-target" style={{ padding: '12px', width: '100%' }} onSubmit={onSubmit}>
            <div style={commentStyle}>
                <textarea onChange={textChanged} onKeyPress={handleCtrlEnter}
                    ref={textareaRef} style={textInputStyle}
                    rows={rows || 1} placeholder={children} value={body} />
                <div style={inputBarStyle}>
                    <UploadButton inputRef={fileinput} value={attach} onChange={uploadValueChanged} />
                    <Button onClick={onSubmit}><Icon name="ei-envelope" size="s" />Send</Button>
                </div>
            </div>
        </form>
    );
}

/**
 * @type {React.CSSProperties}
 */
const commentStyle = {
    display: 'flex',
    flexDirection: 'column',
    width: '100%',
    marginTop: '10px'
};

/**
 * @type {React.CSSProperties}
 */
const inputBarStyle = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: '3px'
};

/**
 * @type {React.CSSProperties}
 */
const textInputStyle = {
    overflow: 'hidden',
    resize: 'none',
    display: 'block',
    boxSizing: 'border-box',
    border: 0,
    outline: 'none',
    padding: '4px'
};