import React, { Component } from 'react';
import {  
  StyleSheet,
  View, 
  Text,
  TextInput, 
  Button,
  TouchableOpacity,
  Dimensions,
  Image
 } from 'react-native';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import Picker from 'react-native-picker';
 import styles from './styles';


class Settings extends Component {
  static navigationOptions = ({ navigation }) => ({
    headerLeft: (
      <TouchableOpacity
        style={styles.nav_left_touch_container}
        onPress={() => {
          navigation.goBack();
        }}
      >
        <View style={styles.nav_left_icon_container}>
          <Image
            style={styles.nav_icon}
            source={require('../../images/btn_nv_back.png')}
          />
        </View>
      </TouchableOpacity>
    ),
    headerTitle: navigation.state.params
    && navigation.state.params.getHeaderTitle
    && navigation.state.params.getHeaderTitle(navigation),
  headerRight:
    navigation.state.params
    && navigation.state.params.getHeaderRight
    && navigation.state.params.getHeaderRight(navigation)
  });

  componentDidMount() {
    const { navigation } = this.props;
    const headerRight = (
      <View>
        <View style={[styles.nav_right_icon_container, { marginRight: 20 }]}>
          <Text style={styles.headerRightGreyText}>儲存</Text>
        </View>
      </View>
    );
    const headerTitle = (
      <View style={styles.headerTitleContainer}>
        <Text style={styles.headerTitleTxt}>指標設定</Text>
      </View>
    );
    navigation.setParams({ getHeaderRight: () => headerRight });
    navigation.setParams({ getHeaderTitle: () => headerTitle });
  }

  constructor(props) {
    super(props);
    this.state = {
      textValue: '163'
    };
   this.onChange = this.onChange.bind(this);
  }

  onChange(a) {
    const { textValue } = this.state;
    const { navigation } = this.props;
    this.setState({textValue: a});
    if (a != '163') {
    const headerTitle = 
      <View style={styles.headerTitleContainer}>
        <Text style={styles.headerTitleTxt}>指標設定</Text>
      </View>;
    const headerRight = (
      <View>
        <TouchableOpacity onPress={() => this.saveData()}>
          <View style={[styles.nav_right_icon_container, { marginRight: 20 }]}>
            <Text style={styles.headerRightText}>儲存</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
    navigation.setParams({ getHeaderTitle: () => headerTitle });
    navigation.setParams({ getHeaderRight: () => headerRight });
  }
  }

  render() {
    const {
      textValue
    } = this.state;
    return (
    <View style={styles.container}>
      <TouchableOpacity/>
      <KeyboardAwareScrollView ref={(scroll) => { this.scroll = scroll; }} scrollEnabled>
      <View style={styles.titleContainer}>
        <Text style={styles.titleText}>身體測量</Text>
      <TouchableOpacity/>        
    </View>
    
  <View style={styles.innerContainer}>
      <TouchableOpacity style={styles.focusContent} />
      <View style={[styles.contentContainer, { borderBottomColor: '#BCBBC1', borderBottomWidth: 1 }]}>
      <View style={styles.labelContainer}>
        <Text style={styles.contentText}>身高</Text>
        <TouchableOpacity style={styles.focusContent} />
      </View>
      <View style={styles.valueContainer}>
        <View style={styles.bodyMeasure_container}>
          <TextInput
          style={styles.input_txt_bodyMeasure}
          onChangeText={(a) => this.onChange(a)}
          underlineColorAndroid="transparent"
          autoCapitalize="none"
          autoCorrect={false}
          blurOnSubmit
          clearButtonMode="while-editing"
          returnKeyType="done"
          value={textValue}
          keyboardType="numeric"
          />
        </View>
        <View style={styles.unitContainer}>
          <Text style={styles.unitText}>公分</Text>
          <TouchableOpacity style={styles.focusContent} />
        </View>
      </View>
    </View>      
    <View style={styles.contentContainer}>
              <View style={styles.labelContainer}>
                <Text style={styles.contentText}>體重</Text>
                <TouchableOpacity style={styles.focusContent} />
              </View>
              <View style={styles.valueContainer}>
                <View style={styles.bodyMeasure_container}>
                  <TextInput
                  style={styles.input_txt_bodyMeasure}
                  value={'54'}
                  />
                </View>
                <View style={styles.unitContainer}>
                  <Text style={styles.unitText}>公斤</Text>
                  <TouchableOpacity style={styles.focusContent} />
                </View>
              </View>
            </View>
    </View>


      <View style={styles.titleContainer}>
        <Text style={styles.titleText}>標準值</Text>
        <TouchableOpacity style={styles.focusContent}/>        
      </View>

    <View style={styles.innerContainer}>
      <TouchableOpacity style={styles.focusContent}/>
      <View style={[styles.contentContainer, { borderBottomColor: '#BCBBC1', borderBottomWidth: 1 }]}>
              <View style={styles.labelContainer}>
                <Text style={styles.contentText}>舒張壓</Text>
                <TouchableOpacity style={styles.focusContent}/>
              </View>
              <View style={styles.valueContainer}>
                <View style={styles.multiContainer}>
                  <TextInput
                  style={styles.input_txt_mmHg}
                  keyboardType="numeric"
                  underlineColorAndroid="transparent"
                  value={'60'}
                  />
                  <Text style={styles.dashText}>-</Text>
                  <TextInput
                  style={styles.input_txt2}
                  keyboardType="numeric"
                  underlineColorAndroid="transparent"
                  value={'80'}
                  />
                </View>
                <View style={styles.unitContainer}>
                  <Text style={styles.unitText2_mmHg}>mmHg</Text>
                  <TouchableOpacity style={styles.focusContent}/>
                </View>
              </View>
      </View>

      <View style={[styles.contentContainer, { borderBottomColor: '#BCBBC1', borderBottomWidth: 1 }]}>
              <View style={styles.labelContainer}>
                <Text style={styles.contentText}>收縮壓</Text>
                <TouchableOpacity style={styles.focusContent} />
              </View>
              <View style={styles.valueContainer}>
              <View style={styles.multiContainer}>
                <TextInput
                style={styles.input_txt_mmHg}
                keyboardType="numeric"
                underlineColorAndroid="transparent"
                value={'100'}
                />
                <Text style={styles.dashText}>-</Text>
                <TextInput
                style={styles.input_txt2}
                keyboardType="numeric"
                underlineColorAndroid="transparent"
                value={'120'}
                />
                </View>
              <View style={styles.unitContainer}>
                  <Text style={styles.unitText2_mmHg}>mmHg</Text>
                  <TouchableOpacity style={styles.focusContent}/>
              </View>
              </View>
      </View>

      <View style={styles.contentContainer}>
              <View style={styles.labelContainer}>
                <Text style={styles.contentText}>心率</Text>
                <TouchableOpacity style={styles.focusContent} />
              </View>
              <View style={styles.valueContainer}>
                <View style={styles.multiContainer}>
                <TextInput
                style={styles.input_txt_mmHg}
                keyboardType="numeric"
                underlineColorAndroid="transparent"
                value={'60'}
                />
                <Text style={styles.dashText}>-</Text>
                <TextInput
                style={styles.input_txt2}
                keyboardType="numeric"
                underlineColorAndroid="transparent"
                value={'90'}
                />
                </View>
                <View style={styles.unitContainer}>
                  <Text style={styles.unitText2_bpm}>bpm</Text>
                  <TouchableOpacity style={styles.focusContent}/>
                </View>
              </View>
            </View>    
      </View>

      <View style={styles.titleContainer}>
        <Text style={styles.titleText}>目標</Text>
        <TouchableOpacity style={styles.focusContent}/>        
      </View>
    
      <View style={styles.innerContainer}>
            <TouchableOpacity style={styles.focusContent} />
            <View style={[styles.contentContainer, { borderBottomColor: '#BCBBC1', borderBottomWidth: 1 }]}>
              <View style={styles.labelContainer}>
                <Text style={styles.contentText}>每日步數</Text>
                <TouchableOpacity style={styles.focusContent}/>
              </View>
              <View style={styles.valueContainer}>
                <View style={styles.dailyStep_container}>
                  <TextInput
                  style={styles.input_txt_dailyStep}
                  keyboardType="numeric"
                  underlineColorAndroid="transparent"
                  value={'1000'}
                  />
                </View>
                <View style={styles.unitContainer}>
                  <Text style={styles.unitText_step}>步</Text>
                  <TouchableOpacity style={styles.focusContent}/>
                </View>
              </View>
            </View>
            <View style={styles.contentContainer}>
              <View style={styles.labelContainer}>
                <Text style={styles.contentText}>上床時間</Text>
              </View>
              <TouchableOpacity
                style={styles.valueContainer}
              >
                <View style={styles.bedTime_picker_container}>
                  <Text style={styles.bedTime_picker_text}>23:00</Text>
                </View>
              </TouchableOpacity>
            </View>
          </View>
    
      </KeyboardAwareScrollView>
      </View>
    )
  }
};

export default Settings;
// <Button onPress={() => this.props.navigation.navigate('HomeScreen')} title="Home"/>