text: import {
      View,
      Text,
      StyleSheet,
      TouchableOpacity,
      ScrollView,
      Switch,
      Image
  } from 'react-native';
  import React from 'react';
  import { getHeight, getWidth } from '../../utils/adaptive';
  import PropTypes from 'prop-types';
  
  export default SettingsComponent = (props) => {
  
      changePINOptionStatus = () => {
          props.changePINOptionStatus(true);
      }
  
      return(
          <View style = { styles.mainContainer } >
              <View style = { styles.topContainer } >
                  <View style = { styles.topContentContainer } >
                      <TouchableOpacity 
                          onPress = { props.screenProps.redirectToMyAccountScreen }
                          style = { styles.backButtonContainer } >
                          <Image 
                              source = { require('../../images/MyAccount/BlueBackButton.png') }
                              style = { styles.icon } />
                      </TouchableOpacity>
                      <Text style = { [styles.titleText, styles.titleMargin] }>Settings</Text>
                  </View>
              </View>
              <ScrollView showsVerticalScrollIndicator = { false } decelerationRate = { 'normal' } >
                  <View style = { styles.explanationContainer }>
                      <Text style = { styles.explanationText }>Sync options</Text>
                  </View>
                  <View style = { styles.optionsContainer }>
                      <Text style = { styles.switchText }>Sync on</Text>
                      <Switch 
                          onTintColor = { '#2794FF' } 
                          tintColor = { 'rgba(56, 75, 101, 0.2)' } 
                          thumbTintColor = { '#FFFFFF' }
                          onValueChange = { props.changeSyncStatus }
                          value = { props.syncStatus } />
                  </View>
                  <View style = { styles.underline }/>
                  <View style = { styles.optionsContainer }>
                      <Text style = { styles.switchText }>Wi-Fi only</Text>
                      <Switch 
                          onTintColor = { '#2794FF' } 
                          tintColor = { 'rgba(56, 75, 101, 0.2)' } 
                          thumbTintColor = { '#FFFFFF' }
                          onValueChange = { props.setWifiConstraint }
                          value = { props.onWifi } />
                  </View>
                  <View style = { styles.underline }/>
                  <View style = { styles.optionsContainer }>
                      <Text style = { styles.switchText }>Only when charging</Text>
                      <Switch 
                          onTintColor = { '#2794FF' } 
                          tintColor = { 'rgba(56, 75, 101, 0.2)' } 
                          thumbTintColor = { '#FFFFFF' }
                          onValueChange = { props.setChargingConstraint }
                          value = { props.onCharging } />
                  </View>
                  <View style = { styles.underline }/>
                  <View style = { styles.checkboxPhotosContainer }>
                      <TouchableOpacity 
                          onPress = { props.syncPhotosAction }
                          style = { styles.flexRow } >
                          <Image 
                              style = { styles.icon }
                              resizeMode = 'contain'
                              source = { 
                                  props.getStateObject().syncPhotos 
                                  ? require('../../images/Icons/ListItemSelected.png')
                                  : require('../../images/Icons/ListItemUnselected.png') }/>
                      
                          <Text style = { [ styles.switchText, styles.checkboxTextMargin ] } >Sync photos</Text>
                      </TouchableOpacity>
                  </View>
                  <View style = { styles.underline }/>
                  <View style = { styles.checkboxPhotosContainer }>
                      <TouchableOpacity 
                          onPress = { props.syncMoviesAction }
                          style = { styles.flexRow } >
                          <Image 
                              style = { styles.icon } 
                              resizeMode = 'contain'
                              source = { 
                                  props.getStateObject().syncMovies 
                                  ? require('../../images/Icons/ListItemSelected.png')
                                  : require('../../images/Icons/ListItemUnselected.png') } />
                          <Text style = { [ styles.switchText, styles.checkboxTextMargin ] } >Sync movies</Text>
                      </TouchableOpacity>
                  </View>
                  <View style = { styles.underline }/>
                  <View style = { styles.checkboxPhotosContainer }>
                      <TouchableOpacity 
                          onPress = { props.syncDocumentsAction }
                          style = { styles.flexRow } >
                          <Image 
                              style = { styles.icon } 
                              resizeMode = 'contain'
                              source = { 
                                  props.getStateObject().syncDocuments 
                                  ? require('../../images/Icons/ListItemSelected.png')
                                  : require('../../images/Icons/ListItemUnselected.png') } />
                      
                          <Text style = { [ styles.switchText, styles.checkboxTextMargin ] } >Sync documents</Text>
                      </TouchableOpacity>
                  </View>
                  <View style = { styles.underline }/>
                  <View style = { styles.checkboxPhotosContainer }>
                      <TouchableOpacity 
                          onPress = { props.syncMusicAction }
                          style = { styles.flexRow } >
                          <Image 
                              style = { styles.icon } 
                              resizeMode = 'contain'
                              source = { 
                                  props.getStateObject().syncMusic 
                                  ? require('../../images/Icons/ListItemSelected.png')
                                  : require('../../images/Icons/ListItemUnselected.png') } />
                      
                          <Text style = { [ styles.switchText, styles.checkboxTextMargin ] } >Sync music</Text>
                      </TouchableOpacity>
                  </View>
                  <View style = { styles.explanationContainer }>
                      <Text style = { styles.explanationText }>Security</Text>
                  </View>
                  {/* <TouchableOpacity style = { styles.optionsContainer } onPress = { props.screenProps.redirectToMyAccountMnemonicScreen }>
                      <Text style = { styles.switchText }>Secret phrase</Text>
                      <View style = { styles.expanderIconContainer }>
                          <Image
                              source = { require('../../images/DashboardScreen/BlueVector.png') }
                              style = { styles.expanderIcon } />
                      </View>
                  </TouchableOpacity> */}
                  <View style = { styles.underline }/>
                  <TouchableOpacity style = { styles.optionsContainer } onPress = { props.screenProps.redirectToChangePasswordScreen } >
                      <Text style = { styles.switchText }>Change password</Text>
                      <View style = { styles.expanderIconContainer }>
                          <Image
                              source = { require('../../images/DashboardScreen/BlueVector.png') }
                              style = { styles.expanderIcon } />
                      </View>
                  </TouchableOpacity>
                  <View style = { styles.underline }/>
                  <TouchableOpacity style = { styles.optionsContainer } onPress = { changePINOptionStatus }> 
                      <Text style = { styles.switchText }>Change PIN</Text>
                      <View style = { styles.expanderIconContainer }>
                          <Image
                              source = { require('../../images/DashboardScreen/BlueVector.png') }
                              style = { styles.expanderIcon } />
                      </View>
                  </TouchableOpacity>
                  <View style = { styles.bottomPadding }/>
              </ScrollView>
          </View>
      )
  }
  
  const styles = StyleSheet.create({
      mainContainer: {
          flex: 1, 
          backgroundColor: '#FFFFFF',
          paddingHorizontal: getWidth(20)
      },
      topContainer: {
          height: getHeight(55)
      },
      topContentContainer: {
          flexDirection: 'row',
          justifyContent: 'flex-start',
          alignItems: 'center',
          marginTop: getHeight(10),
          height: getHeight(40)
      },
      backButtonContainer: {
          justifyContent: 'center',
          alignItems: 'center'
      },
      titleText: { 
          fontFamily: 'montserrat_bold',
          fontSize: getHeight(28), 
          lineHeight: getHeight(33),
          color: '#384B65' 
      },
      titleMargin: {
          marginLeft: getWidth(20),
      },
      icon: {
          height: getHeight(24),
          width: getWidth(24)
      },
      explanationText: {
          fontFamily: 'montserrat_regular', 
          marginTop: getHeight(10),
          fontSize: getHeight(14), 
          lineHeight: getHeight(17),
          color: 'rgba(56, 75, 101, 0.4)',
      },
      explanationContainer: {
          height: getHeight(54),
          justifyContent: 'center'
      },
      optionsContainer: {
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          height: getHeight(55)
      },
      switchText: {
          fontFamily: 'montserrat_regular', 
          fontSize: getHeight(16), 
          lineHeight: getHeight(20),
          color: '#384B65' 
      },
      checkboxPhotosContainer: {
          flexDirection: 'row',
          justifyContent: 'flex-start',
          alignItems: 'center',
          height: getHeight(55)
      },
      checkboxFilesContainer: {
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          height: getHeight(55)
      },
      checkboxTextMargin: {
         marginLeft: getWidth(15) 
      },
      flexRow: {
          flexDirection: 'row'
      },
      expanderIconContainer: {
          height: getHeight(24),
          width: getWidth(24),
          justifyContent: 'center',
          alignItems: 'flex-end'
      },
      expanderIcon: {
          height: getHeight(12),
          width: getWidth(7)
      },
      underline: {
          height: 0.5,
          backgroundColor: 'rgba(56, 75, 101, 0.2)'
      },
      deleteAccountButton: { 
          width: getWidth(335),
          height: getHeight(50),
          borderRadius: 6,
          marginTop: getHeight(35),
          borderWidth: getWidth(1.5),
          borderColor: '#EB5757',
          justifyContent: 'center',
          alignItems: 'center'
      },
      deleteAccountText: { 
          fontFamily: 'montserrat_semibold', 
          fontSize: getHeight(16), 
          color: '#EB5757' 
      },
      bottomPadding: {
          height: getHeight(70)
      }
  });
  
  SettingsComponent.propTypes = {
      changePINOptionStatus: PropTypes.func,
      changeSyncStatus: PropTypes.func,
      email: PropTypes.string,
      getStateObject: PropTypes.func,
      navigation: PropTypes.object,
      onCharging: PropTypes.bool,
      onWifi: PropTypes.bool,
      screenProps: PropTypes.object,
      setChargingConstraint: PropTypes.func,
      setWifiConstraint: PropTypes.func,
      syncDocuments: PropTypes.bool,
      syncDocumentsAction: PropTypes.func,
      syncMovies: PropTypes.bool,
      syncMoviesAction: PropTypes.func,
      syncMusic: PropTypes.bool,
      syncMusicAction: PropTypes.func,
      syncPhotos: PropTypes.bool,
      syncPhotosAction: PropTypes.func,
      syncStatus: PropTypes.bool
  };