import React, { Component } from 'react'
import {
  StyleSheet,
  ScrollView,
  View,
  Image,
  ImageBackground,
  Text,
  TextInput,
  Dimensions,
  StatusBar,
  TouchableOpacity,
  PixelRatio,
} from 'react-native'
import { connect } from 'react-redux'
import loginButton from '../static/images/login-button.png'

import Icon from '../components/Iconfont/Iconfont'
import { NavigationActions, createAction } from '../utils'
import { HeaderView } from './common/HeaderView'
import Toast from 'react-native-root-toast'
const { width, height } = Dimensions.get('window')

@connect(({ theme }) => ({ ...theme }))
class LogForget extends Component {
  constructor(props) {
    super(props)
    this.state = {
      phoneNumber: '',
      secureEntry: true,
      zhColor: '#EEE',
      mmColor: '#EEE',
      newpassWord: '',
      confirmPassWord: '',
      newPwLength: false,
      comfirmPwLength: false,
    }
    // console.disableYellowBox = true;
  }

  render() {
    const { appTheme } = this.props

    // 修改密码
    if (
      this.props.navigation.state.params &&
      this.props.navigation.state.params.comefrom == 'modify'
    ) {
      return (
        <View
          style={[
            styles.container,
            //   { backgroundColor: appTheme.backgroundColor }
            { backgroundColor: '#FFF' },
          ]}
        >
          <StatusBar
            animated={true}
            barStyle={appTheme.barStyle}
            // barStyle={"dark-content"}
            backgroundColor={'transparent'}
            translucent={true}
          />
          {HeaderView(this.props.dispatch, '修改默认密码')}
          <View
            style={{
              marginTop: 10,
              paddingTop: 6,
              paddingBottom: 7,
              marginLeft: 21,
              marginRight: 28,
              flexDirection: 'row',
              alignItems: 'center',
              borderBottomWidth: 1,
              borderBottomColor: this.state.zhColor,
              paddingLeft: 14,
            }}
          >
            <Text
              style={{
                fontSize: 14,
                lineHeight: 20,
                letterSpacing: 0.38,
                color: '#333',
                marginRight: 10,
              }}
            >
              新密码：
            </Text>
            <TextInput
              style={{
                flex: 1,
                padding: 0,
                fontSize: 14,
                lineHeight: 20,
                letterSpacing: 0.38,
                color: '#333',
                marginTop: 4,
              }}
              autoCapitalize="none"
              autoCorrect={false}
              onFocus={e => this.setState({ zhColor: '#E70013' })}
              onBlur={e => {
                if (
                  this.state.newpassWord &&
                  this.state.newpassWord.length < 6
                ) {
                  this.setState({ newPwLength: true, newpassWord: '' })
                  clearTimeout(this.newSettime)
                  this.newSettime = setTimeout(() => {
                    this.setState({ newPwLength: false })
                  }, 3000)
                }
                this.setState({ zhColor: '#EEE' })
              }}
              underlineColorAndroid={'transparent'}
              clearButtonMode="while-editing"
              secureTextEntry={this.state.secureEntry}
              onChangeText={text => this.setState({ newpassWord: text })}
              value={this.state.newpassWord}
              multiline={false}
              // onSubmitEditing={() => this._searchindex()}
              placeholder={'请输入密码'}
              placeholderTextColor={'#CCC'}
            />
            {this.state.newpassWord ? (
              <TouchableOpacity
                onPress={() =>
                  this.setState({ secureEntry: !this.state.secureEntry })
                }
                style={{
                  paddingTop: 6,
                  marginLeft: 3,
                }}
              >
                {this.state.secureEntry ? (
                  <Icon name="icon-icon-kejian" size={20} color={'#999'} />
                ) : (
                  <Icon name="icon-icon-bukejian" size={20} color={'#999'} />
                )}
              </TouchableOpacity>
            ) : null}
          </View>
          {this.state.newPwLength ? (
            <View style={{ paddingLeft: 104, marginTop: 3 }}>
              <Text style={{ color: '#E70013', fontSize: 12 }}>
                输入长度不能小于6位
              </Text>
            </View>
          ) : null}
          <View
            style={{
              marginTop: 10,
              paddingTop: 6,
              paddingBottom: 7,
              marginLeft: 21,
              marginRight: 28,
              flexDirection: 'row',
              alignItems: 'center',
              borderBottomWidth: 1,
              borderBottomColor: this.state.mmColor,
            }}
          >
            <Text
              style={{
                fontSize: 14,
                lineHeight: 20,
                letterSpacing: 0.38,
                color: '#333',
                marginRight: 10,
              }}
            >
              确认密码：
            </Text>
            <TextInput
              style={{
                flex: 1,
                padding: 0,
                fontSize: 14,
                lineHeight: 20,
                letterSpacing: 0.38,
                color: '#333',
                marginTop: 4,
              }}
              autoCapitalize="none"
              autoCorrect={false}
              onFocus={e => this.setState({ mmColor: '#E70013' })}
              onBlur={e => {
                if (
                  this.state.confirmPassWord &&
                  this.state.confirmPassWord.length < 6
                ) {
                  this.setState({ comfirmPwLength: true, confirmPassWord: '' })
                  clearTimeout(this.settime)
                  this.settime = setTimeout(() => {
                    this.setState({ comfirmPwLength: false })
                  }, 3000)
                }
                this.setState({ mmColor: '#EEE' })
              }}
              underlineColorAndroid={'transparent'}
              clearButtonMode="while-editing"
              secureTextEntry={this.state.secureEntry}
              onChangeText={text => this.setState({ confirmPassWord: text })}
              value={this.state.confirmPassWord}
              multiline={false}
              // onSubmitEditing={() => this._searchindex()}
              placeholder={'请输入密码'}
              placeholderTextColor={'#CCC'}
            />
            {this.state.confirmPassWord ? (
              <TouchableOpacity
                onPress={() =>
                  this.setState({ secureEntry: !this.state.secureEntry })
                }
                style={{
                  paddingTop: 6,
                  marginLeft: 3,
                }}
              >
                {this.state.secureEntry ? (
                  <Icon name="icon-icon-kejian" size={20} color={'#999'} />
                ) : (
                  <Icon name="icon-icon-bukejian" size={20} color={'#999'} />
                )}
              </TouchableOpacity>
            ) : null}
          </View>
          {this.state.comfirmPwLength ? (
            <View style={{ paddingLeft: 104, marginTop: 3 }}>
              <Text style={{ color: '#E70013', fontSize: 12 }}>
                输入长度不能小于6位
              </Text>
            </View>
          ) : null}
          <ImageBackground
            source={loginButton}
            resizeMode="stretch"
            style={{
              alignSelf: 'center',
              justifyContent: 'center',
              marginTop: 46,
              backgroundColor: 'transparent',
              width: width * 0.9,
              height: 56,
              borderRadius: 200,
            }}
          >
            <TouchableOpacity
              onPress={() => {
                if (this.toast) {
                  Toast.hide(this.toast)
                }
                if (this.state.newpassWord && this.state.confirmPassWord) {
                  if (this.state.newpassWord == this.state.confirmPassWord) {
                    this.props.dispatch(
                      createAction('app/modifyPw')({
                        newpassWord: this.state.newpassWord,
                        confirmPassWord: this.state.confirmPassWord,
                        username: this.props.navigation.state.params.username,
                      })
                    )
                  } else {
                    this.toast = Toast.show('两次输入不一致', {
                      position: toastHeight,
                    })
                    this.setState({ newpassWord: '', confirmPassWord: '' })
                  }
                } else {
                  this.toast = Toast.show('密码不能为空', {
                    position: toastHeight,
                  })
                }
              }}
            >
              <Text
                style={{
                  alignSelf: 'center',
                  fontSize: 14,
                  lineHeight: 20,
                  letterSpacing: 0.38,
                  color: '#FFF',
                  marginBottom: 5,
                }}
              >
                修改密码
              </Text>
            </TouchableOpacity>
          </ImageBackground>
        </View>
      )
    } else {
      // 忘记密码
      return (
        <View
          style={[
            styles.container,
            //   { backgroundColor: appTheme.backgroundColor }
            { backgroundColor: '#FFF' },
          ]}
        >
          <StatusBar
            animated={true}
            barStyle={appTheme.barStyle}
            // barStyle={"dark-content"}
            backgroundColor={'transparent'}
            translucent={true}
          />
          {HeaderView(this.props.dispatch, '忘记密码')}
          <View
            style={{
              paddingVertical: 13,
              paddingLeft: 5,
              marginLeft: 21,
              marginRight: 28,
              flexDirection: 'row',
              alignItems: 'center',
              borderBottomWidth: 1,
              borderBottomColor: '#EEE',
            }}
          >
            <TextInput
              style={{
                flex: 1,
                padding: 0,
                fontSize: 14,
                lineHeight: 20,
                letterSpacing: 0.38,
                color: '#333',
                marginTop: 4,
              }}
              keyboardType={'numeric'}
              maxLength={11}
              underlineColorAndroid={'transparent'}
              clearButtonMode="while-editing"
              onChangeText={text => this.setState({ phoneNumber: text })}
              value={this.state.phoneNumber}
              multiline={false}
              // onSubmitEditing={() => this._searchindex()}
              placeholder={'请输入手机号'}
              placeholderTextColor={'#CCC'}
            />
          </View>
          <ImageBackground
            source={loginButton}
            resizeMode="stretch"
            style={{
              alignSelf: 'center',
              justifyContent: 'center',
              marginTop: 46,
              backgroundColor: 'transparent',
              width: width * 0.9,
              height: 56,
              borderRadius: 200,
            }}
          >
            <TouchableOpacity onPress={() => alert('找回密码')}>
              <Text
                style={{
                  alignSelf: 'center',
                  fontSize: 14,
                  lineHeight: 20,
                  letterSpacing: 0.38,
                  color: '#FFF',
                  marginBottom: 5,
                }}
              >
                找回密码
              </Text>
            </TouchableOpacity>
          </ImageBackground>
        </View>
      )
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
})

export default LogForget