import React, { forwardRef, memo, useRef } from 'react'
import { TextInput, TextInputProps } from 'react-native'
import { useMemoizedFn } from 'ahooks'

export interface MaxLenInputProps extends Omit<TextInputProps, 'maxLength' | 'onChange'> {
    /*
     * 允许输入内容的最大长度，必填
     */
    maxLength: number
}
const MaxLenInputCompo = forwardRef<TextInput, MaxLenInputProps>((props, ref) => {
    const {
        value, onKeyPress, onChangeText, maxLength
    } = props

    const notChangeRef = useRef(false)

    const originalOnKeyPress = useMemoizedFn((...args: Parameters<typeof onKeyPress>) => {
        const [event] = args
        const { nativeEvent: { key } } = event
        const valueLen = value?.length || 0
        const keyLen = key.length

        const isEmoji = keyLen > 1 && !['Backspace', 'Enter'].includes(key)
        if (isEmoji) {
            const hasEnoughLen = maxLength - valueLen >= keyLen
            if (!hasEnoughLen) {
                // 如果输入的字符是 emoji，并且没有足够的长度容纳该字符，那么我们需要舍弃本次输入的字符。
                notChangeRef.current = true
            }
        }

        onKeyPress?.(...args)
    })

    const originalOnChangeText = useMemoizedFn((...args: Parameters<typeof onChangeText>) => {
        const [text] = args
        const emitValue = notChangeRef.current ? value : text

        onChangeText?.apply?.(null, [emitValue, ...args.slice(1)])
        notChangeRef.current = false
    })

    return (
        <TextInput
            ref={ref}
            {...props}
            value={value}
            maxLength={maxLength}
            onKeyPress={originalOnKeyPress}
            onChangeText={originalOnChangeText} />
    )
})

export const MaxLenInput = memo(MaxLenInputCompo)