import { useState, useEffect } from 'react';
import {
  TextInput,
  TouchableOpacity,
  Image,
  StyleSheet,
  Alert,
  StatusBar,
} from 'react-native';

import {
  Checkbox,
  Input,
  Grid,
  Icon,
  View,
  Text,
  Toast,
  Button,
} from '@ant-design/react-native';


import AsyncStorage from '@/storage/index';
import { useContextHook } from '@/components/AuthContext';
import { useTranslation } from 'react-i18next';
import { useRouter } from '@/hooks/useRouter';

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({
  height: 56,
  width: '100%',
  borderRadius: 10,
  paddingHorizontal: 16,
  paddingVertical: 8,
});

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

  const { linkTo } = useRouter();
  const [language, setLanguage] = useState('en');


  const [fullName, setFullName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [showPassword, setShowPassword] = useState(false);

  const [checked, setChecked] = useState(false);
  const onChangeCheckbox = (e) => {
    console.log('checked = ', e.target.checked)
    setChecked(e.target.checked)
  }

  const handleLogin = () => {
    if (!email) {
      Toast.show({
        content: t('Please enter email'),
        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(() => {
    //             linkTo('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,
        justifyStart,
        alignItemsStretch,
        {
          backgroundColor: themeColor.fill_body,
        },
      ]}>
      <View style={[{ paddingTop: 20 }]}>
        <View style={[{ paddingHorizontal: 24, paddingVertical: 16 }]}>
          <Icon name="close" size={24} color={themeColor.color_text_base} />
        </View>
      </View>
      <View style={[flexRow, { paddingHorizontal: 24 }]}>
        <Text style={{ fontSize: 24, fontWeight: 'bold', color: themeColor.color_text_base, lineHeight: 38 }}>{t('Create_your_account')}</Text>
      </View>
      <View style={[flexRow, { paddingHorizontal: 24 }]}>
        <Text style={{ fontSize: 14, color: themeColor.color_text_caption, lineHeight: 24 }}>{t('Let_us_get_started_with_a_free_Financy_account')}</Text>
      </View>

      <View style={[{ paddingHorizontal: 24, marginBottom: 16, paddingTop: 24 }]}>
        <Input
          style={[inputItem, { backgroundColor: themeColor.fill_base }]}
          placeholder={t('Full_name')}
          value={fullName}
          onChangeText={setFullName}
          autoCapitalize="none"
          keyboardType="default"
        />
      </View>
      <View style={[{ paddingHorizontal: 24, marginBottom: 16 }]}>
        <Input
          style={[inputItem, { backgroundColor: themeColor.fill_base }]}
          placeholder={t('Email')}
          value={email}
          onChangeText={setEmail}
          autoCapitalize="none"
          keyboardType="default"
        />
      </View>
      <View style={[{ paddingHorizontal: 24, marginBottom: 16 }]}>
        <Input
          style={[inputItem, { backgroundColor: themeColor.fill_base }]}
          placeholder={t('Password')}
          value={password}
          onChangeText={setPassword}
          type={!showPassword ? 'password' : 'text'}
          suffix={
            <TouchableOpacity onPress={() => setShowPassword(!showPassword)}>
              <Icon name={!showPassword ? 'eye-invisible' : 'eye'} size={24} color={themeColor.color_text_placeholder} />
            </TouchableOpacity>
          }
        />
      </View>
      <View style={[{ paddingHorizontal: 24, marginBottom: 16 }]}>
        <Button
          type="primary"
          style={{
            height: 56,
            borderRadius: 10,
          }}
          onPress={handleLogin}>
          {t('Sign_Up')}
        </Button>
      </View>

      <View style={[flexRow, alignItemsStart, justifyStart, { paddingLeft: 24, marginBottom: 16 }]}>
        <Checkbox checked={checked} onChange={onChangeCheckbox} style={[{ width: 22 }]}>
        </Checkbox>
        <View style={[flexSub]}>
          <TouchableOpacity onPress={() => {setChecked(!checked)}}>
            <Text style={{ fontSize: 14, color: themeColor.color_text_base, lineHeight: 20 }}>{t('I_certify_that_I_am_18_years_of_age_or_older')}</Text>
          </TouchableOpacity>
          <View style={[flexRow]}>
            <Text style={{ fontSize: 14, color: themeColor.color_text_base, lineHeight: 20 }}>{t('agree_to_the')}</Text>
            <TouchableOpacity onPress={() => linkTo('UserAgreement')}>
              <Text style={{ fontSize: 14, color: themeColor.brandPrimary, lineHeight: 20 }}>{t('User_Agreement')}</Text>
            </TouchableOpacity>
            <Text style={{ fontSize: 14, color: themeColor.color_text_base, lineHeight: 20 }}> {t('and')} </Text>
            <TouchableOpacity onPress={() => linkTo('UserAgreement')}>
              <Text style={{ fontSize: 14, color: themeColor.brandPrimary, lineHeight: 20 }}>{t('Privacy_Policy')}</Text>
            </TouchableOpacity>
          </View>

        </View>
      </View>
      <View style={[flexSub]}></View>

      <View style={[flexRow, alignItemsCenter, justifyCenter, { padding: 24 }]}>
        <Text style={{ fontSize: 14, color: themeColor.color_text_caption, lineHeight: 24 }}>{t('Do_not_have_an_account')}</Text>
        <TouchableOpacity onPress={() => linkTo('Login')}>
          <Text style={{ fontSize: 14, color: themeColor.brandPrimary, lineHeight: 24 }}>{t('Sign_In')}</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};
export default LoginScreen;