swimtracker-app/views/SettingsView.js

import React, { useState } from "react";
import {
  StyleSheet,
  View,
  StatusBar,
  TextInput,
  Text,
  Switch,
} from "react-native";
import themeColors from '../components/themeColors';
import MaterialIcon from "react-native-vector-icons/MaterialCommunityIcons";
import EntypoIcon from "react-native-vector-icons/Entypo";
import ImageHeader from "../components/ImageHeader";
import { connect } from 'react-redux';


// ---------------------------------------------------------------------------------------------

function SettingsTextInput(props) {
  return (
    <React.Fragment>
      <Text style={settingsGroupStyles.label}>{props.label}</Text>
      <TextInput
        style={settingsGroupStyles.textInput}
        placeholder={props.placeholder}
        placeholderTextColor="rgba(167,167,167,1)"
        selectionColor='rgb(120,120,120)'
        value={props.value}
      ></TextInput>
    </React.Fragment>
  );
}

function SettingsSwitch(props) {
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);

  return (
    <React.Fragment>
      <Text style={settingsGroupStyles.label}>{props.label}</Text>
      <Switch
        value={isEnabled}
        //thumbColor={themeColors["WET ASPHALT"]}
        onValueChange={toggleSwitch}
        trackColor={{ false: "#767577", true: themeColors["NEPHRITIS"] }}
        //thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
        ios_backgroundColor="grey"
        style={settingsGroupStyles.switch}
      />
    </React.Fragment>
  )
}

function SettingsSlider(props) {
  /*
    <Slider
    value={props.value}
    disabled={props.disabled}
    thumbTintColor={themeColors["WET ASPHALT"]}
    minimumTrackTintColor={themeColors["CLOUDS"]}
    maximumTrackTintColor={themeColors["CLOUDS"]}
    style={settingsGroupStyles.slider}
  />
  */

  return (
    <React.Fragment>
      <Text style={settingsGroupStyles.label}>{props.label}</Text>
    </React.Fragment>
  )
}

function SettingsCombo(props) {

}


function SettingsGroup(props) {

  return (
    <View style={settingsGroupStyles.container}>
      <Text style={settingsGroupStyles.title}>{props.title}</Text>
      <View style={settingsGroupStyles.subsettings}>
        {React.Children.map(props.children, (child, idx) =>
          <View style={idx == 0 ? [settingsGroupStyles.row, settingsGroupStyles.firstRow] : settingsGroupStyles.row}>
            {child}
          </View>
        )}
      </View>
    </View>
  );
};

const settingsGroupStyles = StyleSheet.create({
  container: {
    padding: 20,
    paddingRight: 30,
  },
  title: {
    color: "white",
    fontSize: 20,
    fontWeight: "600",
  },
  subsettings: {
    padding: 10,
    paddingLeft: 30,
  },
  row: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    borderTopColor: "rgba(255, 255,255, 0.6)",
    paddingTop: 5,
    paddingBottom: 5,
    borderTopWidth: 0.5,
    minHeight: 40,
  },
  firstRow: {
    paddingTop: 0,
    borderTopWidth: 0,
  },
  label: {
    color: "white",
    fontSize: 17,
  },
  textInput: {
    color: "rgba(255,255,255,1)",
    marginTop: 8,
    textAlign: "right",
  },
  slider: {
    minWidth: 100,
    width: 150,
    //minHeight: 50,
  },
  switch: {
    //minHeight: 50,
    //minWidth: 80,
  }
});

// ---------------------------------------------------------------------------------------------


function SettingsView(props) {
  console.log("settings props", props);
  return (
    <View style={{ flex: 1 }}>
      <StatusBar hidden={true} />
      <View style={{ flex: 1 }}>
        <ImageHeader
          text="EINSTELLUNGEN"
          navigation={props.navigation}
          image={require("../assets/infinity_pool2.jpg")}
        />

        <View style={{ flex: 1, backgroundColor: themeColors["BELIZE HOLE"] }}>
          <SettingsGroup title="swimtracker Device">
            <SettingsTextInput
              label="URL/IP"
              placeholder="swimtracker-????"
              value={props.settings.swimTrackerHost}
            />
            <SettingsSwitch label="Start automatically" />
            <SettingsSwitch label="Stop automatically" />
          </SettingsGroup>
        </View>
      </View>
    </View>
  )
}

const mapStateToProps = (state) => {
  return { settings: state.settings };
};

export default connect(mapStateToProps)(SettingsView);