import React, {useMemo, useRef, useState} from 'react';
import {
  Image,
  ImageSourcePropType,
  KeyboardTypeOptions,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';

type Props = {
  required?: boolean; // 是否必填
  icon?: ImageSourcePropType; // 图标
  placeholder?: string; // 占位文字
  keyboardType?: KeyboardTypeOptions; // 输入框键盘类型
  secureTextEntry?: boolean; // 是否是密码
  maxLength?: number; // 输入框最大长度
  value?: string; // 输入框值
  onChangeText?: (text: string) => void; // 输入框文字改变回调
  autoFocus?: boolean; // 是否自动弹出
  clearButton?: boolean; // 输入框右侧是否展示清除按钮
  rightButton?: {
    title: string; // 按钮文字
    color: string; // 按钮文字颜色
    onPress?: () => void; // 点击回调
  }; // 输入框右侧是否需要按钮
};

/**
 * @description: 登录、注册等界面中的输入框条目
 */
export default function LoginTextInputItem(props: Props) {
  const textInputRef = useRef<TextInput>(null);
  const [focus, setFocus] = useState(false);

  const showCleanButton = useMemo(() => {
    return props.value && props.value.length > 0 && focus && props.clearButton;
  }, [focus, props.clearButton, props.value]);

  return (
    <View>
      {props.required === true && (
        <View style={styles.required}>
          <Text style={styles.requiredText}>*</Text>
        </View>
      )}
      <View style={styles.item}>
        {props.icon && <Image style={styles.icon} source={props.icon} />}
        <TextInput
          ref={textInputRef}
          style={styles.textInput}
          placeholder={props.placeholder}
          placeholderTextColor={'#BCBCBC'}
          cursorColor={'#0E84FA'}
          selectionColor={'#0E84FA'}
          keyboardType={props.keyboardType}
          secureTextEntry={props.secureTextEntry}
          maxLength={props.maxLength}
          numberOfLines={1}
          multiline={false}
          value={props.value}
          onChangeText={value => {
            props.onChangeText && props.onChangeText(value);
          }}
          autoFocus={props.autoFocus}
          onFocus={() => {
            setFocus(true);
          }}
          onBlur={() => {
            setFocus(false);
          }}
        />
        {showCleanButton && (
          <TouchableOpacity
            style={styles.clearButton}
            onPress={() => {
              textInputRef.current?.clear();
              props.onChangeText && props.onChangeText('');
            }}>
            <Image
              style={styles.clearButtonImage}
              source={require('@app/assets/images/common/common_clear.png')}
            />
          </TouchableOpacity>
        )}
        {props.rightButton && (
          <View style={styles.rightView}>
            <View style={styles.separator} />
            <TouchableOpacity
              style={styles.button}
              onPress={() => {
                props.rightButton?.onPress && props.rightButton?.onPress();
              }}>
              <Text
                style={[styles.buttonText, {color: props.rightButton.color}]}>
                {props.rightButton.title}
              </Text>
            </TouchableOpacity>
          </View>
        )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  required: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    width: 25,
    alignItems: 'center',
    justifyContent: 'center',
    paddingLeft: 12,
  },
  requiredText: {
    fontSize: 14,
    color: '#EB4900',
  },
  item: {
    backgroundColor: '#F6F8FB',
    height: 45,
    borderRadius: 22.5,
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: 10,
    marginHorizontal: 25,
    paddingHorizontal: 15,
  },
  icon: {
    width: 18,
    height: 18,
  },
  textInput: {
    flex: 1,
    marginLeft: 8,
    fontSize: 14,
    color: '#17171A',
    fontWeight: '500',
  },
  clearButton: {
    height: '100%',
    right: -15,
    paddingVertical: 4,
    paddingHorizontal: 15,
    justifyContent: 'center',
  },
  clearButtonImage: {
    width: 12,
    height: 12,
  },
  rightView: {
    marginLeft: 8,
    flexDirection: 'row',
    alignItems: 'center',
  },
  separator: {
    backgroundColor: '#D8D8D8',
    height: 14,
    width: 1,
  },
  button: {
    height: 32,
    justifyContent: 'center',
    marginLeft: 15,
  },
  buttonText: {
    fontSize: 14,
  },
});
