import React, { Component } from "react";
import { SafeAreaView, View, Text, StyleSheet, TouchableOpacity, Clipboard, ToastAndroid, Alert } from "react-native";
import LinearGradient from "react-native-linear-gradient";
import { BackgroundImage } from "../../components/BackgroundImage";
import AntdIcon from 'react-native-vector-icons/AntDesign'
import Toast from "react-native-toast-message";
import { t } from "../../utils/i18n";

class PasswordCode extends Component {
  constructor(props) {
    super(props);
    this.state = {
      password: this.props.navigation.getParam('password', null)
    }
  }

  handleCopy = () => {
    Toast.show({
      type: 'success',
      text1: 'Copy success!',
    });
   Clipboard.setString(this.state.password)
  }

  render () {
    return (
      <SafeAreaView style={{flex: 1}}>
        <LinearGradient colors={['#3AA40C', '#2C7C0B']} style={{
          flex: 1,
          width: null,
          height: null,
          resizeMode: 'cover'
        }}>
          <BackgroundImage>
            <View style={styles.container}>
              <Text style={[styles.fontPromtBold, {color: 'white', fontSize: 30, marginBottom: 10}]}>{t('new_password')}</Text>
              <Text style={{color: 'white', fontSize: 18, fontFamily: 'Prompt-Regular'}}>{t('copy_pw')}</Text>
              <Text style={{color: 'white', fontSize: 18, marginBottom: 50, fontFamily: 'Prompt-Regular'}}>{t('for_login')}</Text>

              <TouchableOpacity onPress={this.handleCopy}>
                <View style={styles.code_form}>
                  <Text style={{color: 'white', fontSize: 25, fontFamily: 'Prompt-Regular', marginRight: 10}}>
                    {this.state.password}
                  </Text>
                  <AntdIcon name="copy1" color="white" style={{fontSize: 30}}/>
                </View>
              </TouchableOpacity>
            </View>

            <View style={{position: 'absolute', bottom: 20, flex: 1, width: '100%', flexDirection: 'row', justifyContent:'center'}}>
              <Text style={{color: 'white', textAlign: 'center', marginRight: 10, fontSize: 14, fontFamily: 'Prompt-Regular'}}>{t('back_to')}</Text>
              <TouchableOpacity onPress={() => this.props.navigation.navigate('Login')}>
                  <Text style={{color: 'white', fontFamily: 'Prompt-Bold', fontSize: 14}}>{t('login')}</Text>
                </TouchableOpacity>
            </View>
          </BackgroundImage>
        </LinearGradient>
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1, 
    justifyContent: 'center',
    alignItems: 'center', 
    padding: 40
  },
  code_form: {
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: 'white', borderRadius: 30,
    borderWidth: 1,
    width: '100%',
    paddingVertical: 10,
    paddingHorizontal: 15,
    flexDirection: 'row',
    alignItems: 'center'
  },
  fontPromtBold: {
    fontFamily: 'Prompt-Bold'
  }
})

export default PasswordCode;