import React ,{ Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Button,
  Dimensions,
  Switch,
  Image,
  TouchableOpacity
} from 'react-native';
import styles from './styles';

class dataSync 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: 
        <View style={styles.headerTitleContainer}>
        <Text style={styles.headerTitleTxt}>數據同步</Text>
        </View>
      });

    constructor(props) {
        super(props);
        this.state = {
          isBlocking: false
        };
        this.onChange = this.onChange.bind(this);
      }
      
      onChange(value) { 
        const { isBlocking } = this.state;
        this.setState({ value : !value  });
      }

    render() {
        return (
            <View>
                <View style={styles.subRowContainer} />
                <View style={styles.rowBackground}>
                <View style={styles.rowContainer}>
            <View>
                <Text style={styles.rowText}> 健康數據同步 </Text>
            </View>
                <View style={styles.rowContent}>
        <Switch
          value={!this.state.value}
          onValueChange={isSync => this.onChange(isSync)}
          trackColor={{ false: '#E5E5E5', true: '#339FAF' }}
          style={{ transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }] }}
        />
                </View>
                </View>
                </View>
            <View style={styles.webViewContainer}>
            <Text style={styles.sub}>HRB會將本設備中第三方提供之健康數據，包含活動、心率、血壓和睡眠等資料同步至HRB，透過收集到的數據進行分析，以圖表的方式呈現，並適時的給予相關的叮嚀與提醒。
            </Text>
            </View> 
          </View>

            
            
        )

    }
};

export default dataSync;