import React, { useState } from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StyleSheet,
  Alert,
  KeyboardAvoidingView,
  Platform,
  StatusBar,
  ActivityIndicator,
  ToastAndroid
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { NativeModules } from 'react-native';
import dgram from 'react-native-udp';
console.log("dgram", dgram)





const UdpScreen = ({ }) => {
  const navigation = useNavigation();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [secureTextEntry, setSecureTextEntry] = useState(true);

  const handleLogin = async () => {
    if (!username || !password) {
      ToastAndroid.show('请输入信息', 2000);
      return;
    }
    setIsLoading(true);
    try {
      // 创建 UDP Socket 实例
      const socket = dgram.createSocket('udp4');
      // 检查实例是否创建成功
      if (socket) {
        console.log(password, username)
        // 绑定端口、监听事件等操作
        socket.bind(password, username, (err) => {
          if (err) {
            ToastAndroid.show('绑定失败', 2000);
          } else { 
            ToastAndroid.show('初始化成功', 2000);
          }
        });
        // 监听绑定成功事件
        socket.on('listening', () => {
          const address = socket.address();
          console.log("address",address)
          ToastAndroid.show(`${address.address}:${address.port}`, 2000)
        });
      } else {
        ToastAndroid.show('创建失败', 2000);
      }

    } catch (error: any) {
      console.log(error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={styles.container}>
      <StatusBar backgroundColor="#1E90FF" barStyle="light-content" />

      <View style={styles.logoContainer}>
        <Text style={styles.logoText}>测试UDP</Text>
      </View>

      <View style={styles.formContainer}>
        <TextInput
          style={styles.input}
          placeholder="地址"
          placeholderTextColor="#999"
          value={username}
          onChangeText={setUsername}
          autoCapitalize="none"
          autoCorrect={false}
        />

        <View style={styles.passwordInputContainer}>
          <TextInput
            style={styles.input}
            placeholder="端口"
            placeholderTextColor="#999"
            value={password}
            onChangeText={setPassword}
            autoCapitalize="none"
            autoCorrect={false}
          />
        </View>

        <TouchableOpacity
          style={styles.loginButton}
          onPress={handleLogin}
          disabled={isLoading}>
          {isLoading ? (
            <ActivityIndicator size="small" color="#fff" />
          ) : (
            <Text style={styles.loginButtonText}>连 接</Text>
          )}
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingHorizontal: 30,
  },
  logoContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  logoText: {
    fontSize: 32,
    fontWeight: 'bold',
    color: '#1E90FF',
  },
  formContainer: {
    flex: 2,
    justifyContent: 'center',
  },
  input: {
    height: 50,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
    paddingHorizontal: 15,
    marginBottom: 15,
    fontSize: 16,
  },
  passwordInputContainer: {
    position: 'relative',
  },
  togglePassword: {
    position: 'absolute',
    right: 15,
    top: 15,
  },
  togglePasswordText: {
    color: '#1E90FF',
    fontSize: 14,
  },
  loginButton: {
    height: 50,
    backgroundColor: '#1E90FF',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 10,
  },
  loginButtonText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
  },
  footer: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: 20,
  },
  footerText: {
    color: '#666',
  },
  registerText: {
    color: '#1E90FF',
    marginLeft: 5,
    fontWeight: 'bold',
  },
});

export default UdpScreen;