Add WIP for customization section

components/settings/customization/index.js

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
-import { Platform, StyleSheet, View } from 'react-native'
 
-import AppIcon from '../../common/app-icon'
 import AppPage from '../../common/app-page'
 import AppSwitch from '../../common/app-switch'
 import AppText from '../../common/app-text'
@@ -9,7 +7,7 @@ import TemperatureSlider from './temperature-slider'
 import Segment from '../../common/segment'
 
 import { useCervixObservable, saveUseCervix } from '../../../local-storage'
-import { Colors, Spacing, Typography } from '../../../styles'
+import { Colors } from '../../../styles'
 import labels from '../../../i18n/en/settings'
 
 const Settings = () => {
@@ -17,6 +15,9 @@ const Settings = () => {
     useCervixObservable.value
   )
 
+  const [isEnabled, setIsEnabled] = useState(false)
+  const toggleSwitch = () => setIsEnabled((previousState) => !previousState)
+
   const onCervixToggle = (value) => {
     setShouldUseCervix(value)
     saveUseCervix(value)
@@ -27,47 +28,93 @@ const Settings = () => {
     : labels.useCervix.cervixModeOff
 
   return (
-    <AppPage>
+    <AppPage title={'Customization'}>
+      <Segment title={'Tracking categories'}>
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'temperature'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'cervical mucus'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'cervix'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'sex'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'desire'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'pain'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'mood'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'note'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+      </Segment>
+
+      <Segment title={'Fertility feature'}>
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'If turned on ...'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+      </Segment>
+
+      <Segment title={labels.tempScale.segmentTitle}>
+        <AppText>{labels.tempScale.segmentExplainer}</AppText>
+        <TemperatureSlider />
+      </Segment>
+
       <Segment title={labels.useCervix.title}>
         <AppSwitch
           onToggle={onCervixToggle}
           text={cervixText}
           value={shouldUseCervix}
+          trackColor={{ true: Colors.turquoiseDark }}
         />
       </Segment>
-      {/* for iOS disabled temporarily, TODO https://gitlab.com/bloodyhealth/drip/-/issues/545 */}
-      {Platform.OS !== 'ios' && (
-        <Segment title={labels.tempScale.segmentTitle}>
-          <AppText>{labels.tempScale.segmentExplainer}</AppText>
-          <TemperatureSlider />
-        </Segment>
-      )}
-      <Segment last>
-        <View style={styles.line}>
-          <AppIcon
-            color={Colors.purple}
-            name="info-with-circle"
-            style={styles.icon}
-          />
-          <AppText style={styles.title}>{labels.preOvu.title}</AppText>
-        </View>
-        <AppText>{labels.preOvu.note}</AppText>
+
+      <Segment title={'Period prediction'}>
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={
+            'If turned on drip will predict your next menstrual bleeding, after you have tracked 3 complete menstrual cycles.'
+          }
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
       </Segment>
     </AppPage>
   )
 }
 
 export default Settings
-
-const styles = StyleSheet.create({
-  icon: {
-    marginRight: Spacing.base,
-  },
-  line: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  title: {
-    ...Typography.subtitle,
-  },
-})