import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  ScrollView,
  Image,
  Dimensions,
  Alert,
} from 'react-native';

import {
  CameraKitCamera,
  CameraKitGallery
} from 'react-native-camera-kit';

import CameraScreen from './CameraScreen';
//import GalleryScreen from  './GetUserInfo/GalleryScreen';

import { Container, Content, Icon, Form, Input, Label, Item, Button, } from 'native-base';
import chitChat from '../../images/chitchat.png';
import { ButtonProps } from '../../components/button'

class ActivityTab extends Component {

  constructor(props) {
    super(props);
    this.state = {
      example: undefined,
      uri: undefined
    };
    this.OpenCamera = this.OpenCamera.bind(this)
  }

  componentDidMount() {
    console.log("asddddddddddd")
    const {state} = this.props.navigation;
    const imageProps = state.params ? JSON.parse(state.params.imageProps) : null;
    console.log("imageProps",imageProps)

    if(imageProps != null){
      console.log("enterder in this one")
      console.log("imageProps in this one",imageProps[0].uri)
      this.setState({
        uri: imageProps[0].uri
      })
      console.log("inner data",this.state)
    }

  }

  OpenCamera = () => {
    Alert.alert(
      'Take a Avatar',
      'My Alert Msg',
      [
        {text: 'Gallery', onPress: () => console.log('Open Camera') },
        {text: 'Take A Picture', onPress: () => this.props.navigation.navigate('CameraScreen') },
        {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
      ],
      { cancelable: false }
    )
  }

  render() {
    if (this.state.example) {
      const Example = this.state.example;
      return <Example />;
    }
    return (
      <Container>
        <Content style={{ backgroundColor:"#f5f3f9", }}>
          <View style={{ flex:1, alignSelf:'center', top:10, }}>
            <Image source={this.state.uri ? 'uri:' + this.state.uri : chitChat } style={{borderRadius:100}}/ >
            <ButtonProps buttonContainer={styles.buttonContainer} innerDisplay={true} iconName={'md-camera'} iconCss={styles.IconSize} onPress={()=> this.OpenCamera()}/>
          </View>
          <View style={{flex:1,}}>
            <Form>
              <View style={{flexDirection: 'row', justifyContent: 'space-between' }}>
                <View style={{flex:1}}>
                  <Item floatingLabel>
                    <Label style={{color:'black'}}>First Name</Label>
                    <Input onChangeText={(value) =>  this.setState({ firstName: value })  }/>
                  </Item>
                </View>
                <View style={{flex:1}}>
                  <Item floatingLabel>
                    <Label style={{color:'black'}}>Last Name</Label>
                    <Input onChangeText={(value) =>  this.setState({ lastName: value })  }/>
                  </Item>
                </View>
              </View>
              <Item floatingLabel>
                <Label style={{color:'black'}}>User Name</Label>
                <Input onChangeText={(value) =>  this.setState({ userName: value })  }/>
              </Item>
              <Item floatingLabel>
                <Label style={{color:'black'}}>Email</Label>
                <Input onChangeText={(value) =>  this.setState({ email: value })  }/>
              </Item>
              <Item floatingLabel>
                <Label style={{color:'black'}}>Password</Label>
                <Input secureTextEntry={ true } onChangeText={(value) =>  this.setState({ password: value })}/>
              </Item>
            </Form>
          </View>
           <Button block style={{ backgroundColor:'#5269BE', margin: 15, marginTop: 25 }} onPress={this.signUp}>
              <Text style={{ color: 'white' }}>Create User</Text>
            </Button>
        </Content>
      </Container>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: '#f5f3f9'
  },
  buttonContainer: {
    borderRadius: 55,
    width: 55,
    height: 55,
    backgroundColor:'#6989FF',
    bottom:0,
    position:'absolute',
    alignSelf:'flex-end',
  },
});

export default ActivityTab;