import { useState, useEffect } from 'react';
import {
    TouchableOpacity,
} from 'react-native';

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

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

import AsyncStorage from '@/storage/index';
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 Index = () => {

    const { themeColor } = useContextHook();
    const { t, i18n } = useTranslation();

    const { linkTo, resetAllRoutes, isFocused } = useRouter();
    useEffect(() => {
        // 这里请求配置后，再跳转
    }, [isFocused]);

    return (
        <View style={[flexSub]}>
            <View style={[flexRow, { paddingHorizontal: 24 }]}>
                <Text style={{ fontSize: 24, fontWeight: 'bold', color: themeColor.color_text_base, lineHeight: 38 }}>{t('What’s_your_citizenship')}?</Text>
            </View>
            <View style={[flexRow, { paddingLeft: 24, paddingRight: 100 }]}>
                <Text style={{ fontSize: 14, color: themeColor.color_text_caption, lineHeight: 24 }}>{t('If_you’re_a_citizen_of_more_than_one_country,_please_pick_one')}</Text>
            </View>
            
            <View style={[flexRow, { padding: 24 }]}>
                <Text style={{ fontSize: 18, fontWeight: 'bold', color: themeColor.color_text_base, lineHeight: 24 }}>{t('Citizenship')}?</Text>
            </View>

            <View style={[flexRow, { padding: 24 }]}>
                <Text style={{ fontSize: 18, fontWeight: 'bold', color: themeColor.color_text_base, lineHeight: 24 }}>{t('Citizenship')}?</Text>
            </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 Index;