import React from 'react'
import { Platform, FlatList, BackHandler, ScrollView, TextInput, TouchableOpacity, Image , View, Text, StyleSheet, Dimensions } from 'react-native'
import { Images, Fonts, Metrics, ApplicationStyles } from '../../Themes'
import Header from '../../Components/Header';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Drawer from 'react-native-drawer'
import Menu from '../../Containers/Menu/MenuView';

class CadastrarPaciente extends React.Component {
  constructor(props){
    super(props);
    this.state = { 
      nome: '',
      idade: '',
      altura: '',
      peso: '',
      imc: '',
      grupoPesquisa: '',
      localAtendimento: '',
      observacoes: '',
    };
  }

  render () {
    const { navigate } = this.props.navigation;
    return (
      <View style={{flex: 1}}>
        <Header back={true} toggle={() => this.openControlPanel()} navigation={this.props.navigation}></Header>
        <View style={styles.containerCenter}>
          <View style={styles.containerImageTop}>
            <Image source={Images.logoPages} style={{width: 100}} resizeMode={'contain'}></Image>
          </View>
        </View>
        <ScrollView style={{paddingLeft: 20, paddingRight: 20}}> 
          <TextInput
          style={{height: 40}}
          />
          <TextInput
            style={styles.inputCadastro}
            placeholder={'Idade'}
          />
          <TextInput
            style={styles.inputCadastro}
            placeholder={'Altura'}
          />
          <TextInput
            style={styles.inputCadastro}
            placeholder={'Peso'}
          />
          <TextInput
            style={styles.inputCadastro}
            placeholder={'IMC'}
          />
          <TextInput
            style={styles.inputCadastro}
            placeholder={'Grupo de Pesquisa'}
          />
          <TextInput
            style={styles.inputCadastro}
            placeholder={'Local de Atendimento'}
          />
          <TextInput
            style={styles.inputCadastroObservacoes}
            placeholder={'Observações'}
          />
          

          <TouchableOpacity
            onPress={ () => this.props.navigation.goBack()}
            style={styles.submit}
            underlayColor='#fff'>
              <Text style={styles.submitText}>Salvar</Text>
          </TouchableOpacity>


        </ScrollView>
      </View>
    )
  }
}

const mapDispatchToProps = dispatch => {
  return {
    actions: bindActionCreators(Object.assign({}), dispatch)
  }
}

export default connect (null, mapDispatchToProps)(CadastrarPaciente);

const { height, width } = Dimensions.get('window');

const styles = StyleSheet.create({
  inputCadastro: {
    marginTop: 5,
    marginBottom: 5,
    height: 40, 
    color: '#898989', 
    paddingLeft: 20, 
    borderRadius: 5, 
    backgroundColor: '#d4d4d4',
  },
  inputCadastroObservacoes: {
    marginTop: 5,
    marginBottom: 5,
    height: 100, 
    color: '#898989', 
    paddingLeft: 20, 
    borderRadius: 5, 
    backgroundColor: '#d4d4d4',
  },
  submit: {
    marginTop: 20,
    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: 50,
    paddingRight: 50,
    backgroundColor: '#113a3e',
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#fff'
  },
  submitText:{
    color: '#fff',
    textAlign: 'center',
  },
  textDetalhes: {
    fontSize: 17,
    color: '#838383'
  },
  containerImageTop: {
    alignItems: 'center'
  },
  containerCenter: {
    justifyContent: 'center',
    alignItems: 'center'
  }
})