import { useState, useEffect } from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  Image,
  StyleSheet,
  Alert,
} from 'react-native';
import { Provider, Toast } from '@ant-design/react-native';
 

import AsyncStorage from '@/storage/index'; 
import { useNavigation, useIsFocused } from '@react-navigation/native';
import { useContextHook } from '@/components/AuthContext';
import { useTranslation } from 'react-i18next';

import {
  statusBarHeight,
  paddingTopStatusBarHeight,
  flexRow,
  flexColumn,
  flexSub,
  flexShrink,
  flexWrap,
  flexnoWrap,
  justifyStart,
  justifyEnd,
  justifyCenter,
  justifyBetween,
  justifyAround,
  justifyEvenly,
  alignItemsStart,
  alignItemsEnd,
  alignItemsCenter,
  alignItemsStretch,
  positionRelative,
  positionAbsolute,
  useStyles,
} from '@/assets/styles/css';


const inputItem = useStyles({
  width: '80%',
  height: 40,
  borderColor: 'gray',
  borderWidth: 1,
  borderRadius: 5,
  paddingHorizontal: 10,
  marginBottom: 20,
});

const LoginScreen = () => {
  const { themeColor } = useContextHook();
  const { t, i18n } = useTranslation();
  console.log('🚀 ~ LoginScreen ~ i18n:', i18n)

  const router = useNavigation();
  const [language, setLanguage] = useState('en');

  const isFocused = useIsFocused();

  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  useEffect(() => {
   
  }, [isFocused]);

  const handleLogin = () => {
    if (!username) {
      Toast.show({
        content: t('Please enter user name'),
        position: 'center',
        mask: true,
      });
      return;
    }
    if (!password) {
      Toast.show({
        content: t('Please enter password'),
        position: 'center',
        mask: true,
      });
      return;
    }
    const key = Toast.show({
      icon: 'loading',
      content: t('loading'),
      position: 'center',
      mask: true,
      duration: 0,
    });
    console.log(123,123);
    // login({ username, password })
    //   .then(res => {
    //     Toast.remove(key);
    //     setTimeout(() => {
    //       Toast.show({
    //         content: t('login success'), //i18n.t('login_success'),
    //         position: 'center',
    //         mask: true,
    //         onClose: () => {
    //           // 设置全局的用户信息
    //           setUser(res.user)
    //           AsyncStorage.setItem('appToken', {
    //             appToken: res.token,
    //             user: res.user,
    //           }).then(() => {
    //             router.replace('Home');
    //           });
    //         },
    //       });
    //     }, 200);
    //   })
    //   .catch(err => {
    //     Toast.remove(key);
    //     setTimeout(() => {
    //       Toast.show({
    //         content: t('login_failed'), //  i18n.t('login_failed'),
    //         position: 'center',
    //         mask: true,
    //       });
    //     }, 200);
    //     // i18n.t('login_error_message')
    //   });
  };

  return (
    <View
      style={[
        flexSub,
        justifyCenter,
        alignItemsCenter,
        {
          backgroundColor: themeColor.colorBgBase,
        },
      ]}>
      <View style={[{ padding: 20 }]}>
        <Image
          source={require('@/assets/images/logo.png')}  
          style={[
            {
              width: 300,
              height: 150,
              resizeMode: 'contain',
            },
          ]}
        />
      </View>
      <Text
        style={{
          fontSize: 24,
          fontWeight: 'bold',
          marginBottom: 20,
        }}>
        {t('login')}
      </Text>
      <TextInput
        style={[inputItem]}
        placeholder={t('username')}
        value={username}
        onChangeText={setUsername}
        autoCapitalize="none"
        keyboardType="default"
      />
      <TextInput
        style={[inputItem]}
        placeholder={t('password')}
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      <TouchableOpacity
        style={{
          width: '80%',
          backgroundColor: '#7ac0f6',
          borderRadius: 5,
          paddingVertical: 10,
        }}
        onPress={handleLogin}>
        <Text
          style={{
            color: '#fff',
            textAlign: 'center',
            fontSize: 18,
          }}>
          {t('login')}
        </Text>
      </TouchableOpacity>
    </View>
  );
};
export default LoginScreen;