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

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

import UploadButton from './UploadButton';
import toast from 'react-hot-toast';


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


/** @external Promise */

/**
 * @typedef {object} MessageInputProps
 * @property {string} text text
 * @property {function({body:string, attach:string | File}):Promise<boolean>} onSend onSend
 * @property {number=} rows rows
 * @property {string=} placeholder placeholder
 */

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

    let updateFocus = () => {
        const isDesktop = window.matchMedia('(min-width: 62.5rem)');
        if (isDesktop.matches) {
            const textarea = textareaRef.current;
            if (textarea) {
                textarea.focus();
                moveCaretToEnd(textarea);
            }
        }
    };
    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;
        if (el) {
            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;
        if (input && input.files) {
            onSend({
                body: body,
                attach: attach ? input.files[0] : ''
            }).then((success) => {
                if (success) {
                    setAttach('');
                    setBody('');
                    if (textareaRef.current) {
                        textareaRef.current.style.height = '';
                    }
                    updateFocus();
                } else {
                    toast('Can not update this message');
                }
            }).catch(console.log);
        }
    };
    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={placeholder} 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'
};