import { Input, List, Space, Typography } from "antd"
import { useEffect, useRef, useState } from "react"
import Expression from "./Expression";
import { TextAreaProps, TextAreaRef } from "antd/es/input/TextArea";

interface Props extends TextAreaProps {
    /**是否开启表情 */
    emo?: boolean,
    maxStr?: number,//最大字数
    value?: string
    onChange?: (e?: any) => void
}
export function TextEditor(props: Props) {

    /****************************************/
    const { emo = true, maxStr, value: oldValue, onChange, ...inputProps } = props
    const [strLength, setStrLength] = useState(0)
    const inputRef = useRef<TextAreaRef>();
    const [cursorPos, setCursorPos] = useState({ start: 0, end: 0 });
    const [value, setValue] = useState<string>(oldValue || undefined)
    /****************************************/

    // 回填
    useEffect(() => {
        if (oldValue && oldValue !== value) {
            setValue(oldValue)
        }
    }, [oldValue])

    /** 插入表情 */
    const addEmo = (_: string, emji: string) => {
        const { start } = cursorPos;
        if (value) {
            const newValue = value.slice(0, start) + emji + value.slice(start);
            setValue(newValue);
            onChange?.(newValue)
        } else {
            setValue(emji);
            onChange?.(emji)
        }

        // 调整光标位置  
        setTimeout(() => {
            const newPos = start + emji.length;
            inputRef.current?.focus();
            inputRef.current?.resizableTextArea?.textArea.setSelectionRange(
                newPos,
                newPos
            );
        }, 0);
    }

    // 记录光标位置  
    const handleBlur = () => {
        const textarea = inputRef.current?.resizableTextArea?.textArea;
        if (textarea) {
            setCursorPos({
                start: textarea.selectionStart,
                end: textarea.selectionEnd
            });
        }
    };

    /** 文本计数 */
    useEffect(() => {
        if (value) {
            setStrLength(value.length)
        } else {
            setStrLength(0)
        }
    }, [value])

    return <List
        header={<div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <Space wrap>
                {emo && <Expression addEmo={addEmo} />}
            </Space>
            {maxStr && <Typography.Text type='secondary'><Typography.Text type={strLength > maxStr ? 'danger' : 'secondary'} >{strLength}</Typography.Text>/{maxStr}</Typography.Text>}
        </div>}
        bordered
        dataSource={['']}
        renderItem={(item) => (
            <List.Item style={{ padding: 0 }}>
                <Input.TextArea
                    autoSize={{ minRows: 4, maxRows: 5 }}
                    variant="borderless"
                    placeholder="请输入内容"
                    style={{padding: '3px 15px'}}
                    {...inputProps}
                    onChange={(e) => {
                        onChange(e.target.value)
                        setValue(e.target.value)
                    }}
                    ref={inputRef}
                    maxLength={maxStr}
                    onBlur={handleBlur}
                    value={value}
                />
            </List.Item>
        )}
        style={{ marginTop: 10 }}
    />
}