/**
 * 登录页面V2
 * @邠心vbe on 2022/12/23
 */
 import React from 'react';
 import {View, Text, StyleSheet, Image, TextInput, ScrollView, Platform} from 'react-native';
 import { BackButton } from '../../components/Toolbar';
 import apiUser from '../../api/apiUser';
 import { setAccessToken } from '../../api/http';
 import { getStorageSync, setStorage, getStorageJsonSync, setStorageJson } from '../../utils/storage';
 import Button from '../../components/Button';
 import Dialog from '../../components/Dialog';
 import { PageList } from '../Router';
 import utils from '../../utils/utils';
 import CheckBoxText from '../../components/CheckBoxText';
 
 export const AutoLogin = async (back) => {
   const data = await getStorageJsonSync('loginData')
   if (data && data.email && data.password) {
     apiUser.login(data).then(res => {
       if (res.data.accessToken) {
         setAccessToken(res.data.accessToken);
         if (back) back();
       }
     }).catch((err) => {
       console.warn('AutoLogin', err);
       toastShort('Sign in failed')
     });
   }
 }
 
 //注册FCM通知token
 export const RegisterToken = async () => {
   if (getUserId() > 0 && notifyToken.token) {
     const thisDate = utils.formatYYMM(new Date()) + "-" + getUserId();
     const lastDate = await getStorageSync('RegisterTokenDate');
     console.log('>>>RegisterToken<<<', thisDate, lastDate + "●");
     if (thisDate != lastDate) {
       const params = {
         os: notifyToken.os ? notifyToken.os : Platform.OS,
         googleToken: notifyToken.token
       }
       apiUser.setNotifyToken(params).then(res => {
         console.log('>>>RegisterToken-Suc<<<', res);
         setStorage('RegisterTokenDate', thisDate);
       }).catch(err => {
         console.log('>>>RegisterToken-Err<<<', err);
       });
     }
   }
 }
 
 export default class Login extends React.Component {
 
   constructor(props) {
     super(props);
     this.state = {
       email: '',
       password: '',
       rememberMe: true
     }
   }
 
   componentDidMount() {
     /*if (this.props.route.params.action) {
       this.props.navigation.addListener('beforeRemove', (e) => {
         if (this.props.route.params.action == '401') {
           //dispatchPage(StackActions.push('home'));
           dispatchPage(state => {
             console.log('routes', state);
             const r = [];
             var index = 0;
             var homekey = '';
             for (let i = 0; i < state.routes.length; i++) {
               const item = state.routes[i];
               if (item.name == 'home') {
                 r.push(item);
                 index = i;
                 homekey = item.key;
                 break;
               } else {
                 r.push(item);
               }
             }
             console.log('new routes', r);
             return {
               ...CommonActions.goBack(),
               source: this.props.route.key,
               target: homekey,
             };
           });
         }
       });
     }*/
     this.getEmail();
   }
 
   async getEmail() {
     const data = await getStorageJsonSync('loginData');
     if (data && data.email) {
       this.setState({
         email: data.email
       });
     }
   }
 
   onLogin() {
     //console.log(this.state);
     if (this.state.email == '') {
       toastShort('Please enter email address');
       return;
     }
     if (this.state.password == '') {
       toastShort('Please enter password');
       return;
     }
     Dialog.showProgressDialog();
     apiUser.login(this.state).then(res => {
       console.log('res.data', res);
       if (res.data.accessToken) {
         setAccessToken(res.data.accessToken);
         Dialog.dismissLoading();
         if (this.state.rememberMe) {
           setStorageJson('loginData', this.state);
         } else {
           setStorageJson('loginData', {});
         }
         startPage(PageList.home);
         //this.props.navigation.goBack();
       } else {
         toastShort(res.msg);
         Dialog.dismissLoading();
       }
     }).catch((err) => {
       toastShort(err);
       Dialog.dismissLoading();
     });
   }
 
   getBackTopPosition() {
     return isIOS ? statusHeight : 4;
   }
 
   render() {
     return (
       <View style={ui.flex1}>
       <View style={[styles.backBtn, {top: this.getBackTopPosition()}]}>
         <BackButton/>
       </View>
       <ScrollView
         style={ui.container}
         keyboardShouldPersistTaps={'handled'}>
         <View style={styles.header}>
           <Image
            style={styles.headerImg}
            resizeMode='contain'
            source={require('../../images/app-logo.png')} />
         </View>
         <View style={styles.loginView}>
           <View style={styles.loginForm}>
             <View style={styles.inputView}>
               <Zocial name='email' size={28} color='#999999' />
               <TextInput 
                 style={styles.inputText}
                 placeholder={"E-mail"}
                 textContentType='emailAddress'
                 defaultValue={this.state.email}
                 maxLength={50}
                 onChangeText={(v) => {
                   this.setState({
                     email: v
                   })
                 }}/>
             </View>
             <View style={styles.inputView}>
               <Fontisto name='locked' size={28} color='#999999' style={{marginLeft: 3, marginRight: 2}} />
               <TextInput 
                 style={styles.inputText}
                 placeholder="Password"
                 textContentType='password'
                 secureTextEntry={true}
                 maxLength={20}
                 onChangeText={(v) => {
                   this.setState({
                     password: v
                   })
                 }}
                 onSubmitEditing={() => {
                   this.onLogin();
                 }}/>
             </View>
             <View style={ui.flexcw}>
               <View style={$padding(12, 8)}>
                 <CheckBoxText
                   value={this.state.rememberMe}
                   onValueChange={(newValue) => {
                     this.setState({ rememberMe: newValue });
                   }}
                   text={'Remember me'}
                 />
               </View>
               <Text
                 style={styles.linksText}
                 onPress={() => startPage(PageList.forgotPassword)}>Forgot Password</Text>
             </View>
             <Button
               style={styles.loginButton}
               text='SIGN IN'
               elevation={1.5}
               onClick={() => {
                 this.onLogin()
               }}
             />
           </View>
         </View>
         <View style={styles.signView}>
           <Text style={{color: '#333'}}>New User?</Text>
           <Text
             style={styles.linksText}
             onPress={() => {
               startPage(PageList.register);
             }}
           >Click here to sign up</Text>
         </View>
       </ScrollView>
       </View>
     );
   }
 };
 
 const styles = StyleSheet.create({
   backBtn:{
     top: 4,
     left: 2,
     zIndex: 1,
     position: 'absolute'
   },
   header: {
     height: 260,
     paddingTop: 56,
     paddingBottom: 20,
     paddingLeft: 32,
     paddingRight: 32,
     alignItems: 'center'
   },
   headerImg: {
     width: $vw(63),
     height: 100
   },
   loginView: {
     padding: 16,
     marginTop: -24,
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
     backgroundColor: 'white'
   },
   logoImg: {
     width:136.19,
     height: 42.85,
     marginTop: 18
   },
   loginForm: {
     paddingLeft: 16,
     paddingRight: 16,
   },
   inputView: {
     marginTop: 30,
     borderRadius: 8,
     paddingTop: 6,
     paddingLeft: 16,
     paddingRight: 16,
     paddingBottom: 6,
     alignItems: 'center',
     flexDirection: 'row',
     backgroundColor: '#F5F5F5'
   },
   inputText: {
     flex: 1,
     color: '#333',
     fontSize: 15,
     paddingTop: 6,
     paddingLeft: 16,
     paddingBottom: 6
   },
   loginButton: {
     marginTop: 32,
     borderRadius: 4
   },
   signView: {
     paddingTop: 32,
     paddingBottom: 16,
     alignItems: 'center',
   },
   checkText: {
     color: '#333',
     fontSize: 14,
     paddingLeft: 8
   },
   linksText: {
     ...ui.link,
     padding: 8,
     fontSize: 14,
     textDecorationLine: 'underline'
   }
 });