import * as React from "react";
import {StyleProp, TextInput, TextStyle} from "react-native";
import {utils} from '@yoronsoft/js-utils';
import {IProps, PageInputType} from "./input";
import BasicIcon from "../icon";
import BasicView from "../view";
import app, {ThemeCss} from "../../app";

const BasicInput: React.FC<IProps> = (props) => {
    const css = app.theme.useGet<ThemeCss>();
    const ref = React.useRef<TextInput>(props.ref);
    const [value, setValue] = React.useState<string>('');
    const styleCss: StyleProp<TextStyle> = {
        color: css.font.color,
    };
    if (props.type === inputType.textarea) {
        styleCss.textAlignVertical = 'top';
        if (props.height) styleCss.height = props.height;
    }

    React.useEffect(() => {
        setValue(props.value ?? '');
    }, [props.value])
    React.useEffect(() => {
        if (ref.current) {
            const name = props.refName ?? `input_${new Date().getTime()}_${utils.toRandom()}`;
            app.refs.set(name, ref.current);
        }
    }, [ref.current])

    return <BasicView width={props.width} height={props.height} style={[css.rowBetweenCenter]}>
        <TextInput ref={ref} style={[{flex: 1, paddingHorizontal: 10}, styleCss, props.style]}
                   value={props.value} maxLength={props.max} keyboardType={props.keyboardType}
                   placeholder={props.placeholder} placeholderTextColor={props.placeholderTextColor ?? css.font.color}
                   allowFontScaling={false} autoFocus={props.autoFocus}
                   secureTextEntry={props.type === inputType.password ? true : undefined}
                   passwordRules={props.type === inputType.password ? `minlength:${props.min ?? 6};maxlength:${props.max ?? 20};` : undefined}
                   multiline={props.type === inputType.textarea ? true : undefined}
                   blurOnSubmit={props.blurOnSubmit ?? undefined}
                   onChangeText={val => {
                       setValue(val);
                       if (typeof props.onChangeText === 'function') props.onChangeText(val);
                   }}
                   onFocus={() => {
                       if (typeof props.onFocus === "function") props.onFocus();
                   }}
                   onBlur={() => {
                       if (typeof props.onBlur === "function") props.onBlur();
                   }}
                   onContentSizeChange={(event) => {
                       if (typeof props.onContentSizeChange === "function") props.onContentSizeChange(event.nativeEvent.contentSize);
                   }}
        />
        {
            props.isClearBtn && value.length ?
                <BasicIcon name={props.clearIcon} size={props.clearIconSize} color={props.clearIconColor} ph={5}
                           onPress={() => {
                               // ref.current.clear();
                               setValue('');
                               if (typeof props.onChangeText === 'function') props.onChangeText('');
                           }}/> : undefined
        }
    </BasicView>
}

/**
 * input 类型
 */
const inputType: PageInputType = {
    text: "text",
    password: "password",
    textarea: "textarea"
}

/**
 * input 失去焦点
 */
const inputBlur = () => {
    const list = app.refs.list();
    if (list) {
        for (let name in list) {
            if (list.hasOwnProperty(name)) {
                if (list[name] && typeof list[name].blur === "function") list[name].blur()
            }
        }
    }
}

export default BasicInput
export {
    inputType,
    inputBlur,
}