import React, { Component } from 'react';
import { Button } from 'react-native-elements';
import {
  View, StatusBar, Text, ScrollView, Image, Dimensions, StyleSheet
} from 'react-native';
import PropTypes from 'prop-types';
import Modal from 'react-native-modalbox';

import { Container } from '../components/Container';
import { LoginTextInput } from '../components/LoginTextInput';
import { ButtonLogin } from '../components/ButtonLogin';
import styles from './styles';
import { ButtonWithBorder } from '../components/ButtonWithBorder';
import { TextContent } from '../components/TextContent';
import { TextTitle } from '../components/TextTitle';
import { ButtonYellow } from '../components/ButtonYellow';
import { TextInputBasic } from '../components/TextInputBasic';

const imageWidth = Dimensions.get('window').width;
const imageHeight = Dimensions.get('window').height;

class LPEmailTerkirim extends Component {
  static navigationOptions = {
    //title: 'Welcome',
    header: () => null,
  };

  constructor(props) {
    super(props);
    this.modal1 = React.createRef();
    this.state = {
      isOpen: false,
      isDisabled: false,
      swipeToClose: true,
    };
  }

/*   state = {
    modalVisible: false,
  };

  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  } */

  static propTypes = {
    navigation: PropTypes.object,
  };

  handleAktivasiPress = () => {
    console.log('daftar pressed');
    const { navigation } = this.props;
    navigation.navigate('DaftarIndividu', { title: 'Daftar Sebagai Individu' });
  };


  render() {
    const { goBack } = this.props.navigation;
    return (
      <Container >
        <View style={styles.wrapper }>
          <View >
            <TextTitle content='Email Terkirim' />
          </View>
          <View>
            <Image
              style={{ width: imageWidth / 2, height: imageWidth / 2 }}
              source={require('../components/Assets/registration/icon_sent.png')}
              resizeMode='contain'
            />
          </View>
          <View style={{ marginHorizontal: '8%' }}>
            <TextContent
             content="Sebuah tautan telah dikirimkan ke alamat email anda untuk melakukan reset password.
             Silahkan klik tautan tersebut untuk melakukan pengubahan password." />

          </View>
          <View>
            <ButtonWithBorder text="Kembali" onPress={() =>  this.refs.UbahPW.open()} />
          </View>

            <Modal style={[styles.modal, styles.emailTerkirim]} position={"center"} ref={"UbahPW"} isDisabled={this.state.isDisabled}>
              <View style={{flex: 1, width: '80%', alignItems: 'center', justifyContent:'space-evenly'}}>
                <View><TextTitle content="Ubah Password"/></View>
                <View>
                  <TextContent content="Masukkan kode yang anda dapatkan melalui email"/>
                </View>
                <View style={{}}>
                  <TextInputBasic placeholder="Masukkan Kode"/>
                </View>
                <View style={{}}>
                  <ButtonYellow onPress={()=> this.refs.UbahPW2.open()} text="Lanjutkan"/>
                </View>

              </View>
            </Modal>

            <Modal style={[styles.modal, styles.emailTerkirim]} position={"center"} ref={"UbahPW2"} isDisabled={this.state.isDisabled}>
              <View style={{flex: 1, width: '80%', alignItems: 'center', justifyContent:'space-evenly'}}>
                <View><TextTitle content="Ubah Password" /></View>
                <View>
                  <TextContent content="Masukkan password baru yang ingin Anda gunakan untuk masuk ke akun Anda"/>
                </View>
                <View>
                  <TextContent content="Min 8 karakter. Terdiri dari huruf ( berisi huruf kapital ), dan angka" />
                  <LoginTextInput placeholder="Masukkan Password Baru"/>
                  <LoginTextInput placeholder="Masukkan Kembali Password Baru"/>


                  <ButtonYellow onPress={()=> this.refs.UbahSuccess.open()} text="Ubah Password"/>
                </View>

              </View>
            </Modal>

            <Modal style={[styles.modal, styles.emailTerkirim]} position={"center"} ref={"UbahSuccess"} isDisabled={this.state.isDisabled}>
              <View style={{flex: 1, width: '80%', alignItems: 'center', justifyContent:'space-evenly'}}>
                <View style={{}}>
                  <Image
                    style={{height:imageWidth / 3, width:imageWidth / 3 }}
                    source={require('../components/Assets/registration/icon_change_password.png')}
                    resizeMode="contain"
                  />
                </View>
                <View style={{alignItems:'center'}}>
                  <TextTitle content="Ubah Password Berhasil" />
                </View>
                <View>
                  <TextContent content="Anda akan segera dialihkan ke halaman Login. Lalu Anda dapat login dengan password baru Anda." />
                </View>

              </View>
            </Modal>
        </View>
      </Container>
    );
  }
}

export default LPEmailTerkirim;