klatab/screens/Settings.tsx

import React, { useState, useEffect, useContext } from 'react';
import { View, Text, ScrollView, TextInput, Button, StyleSheet, Alert, Linking, TouchableOpacity, Platform, ActivityIndicator, Image } from 'react-native';
import { SettingsContext } from '../SettingsProvider';
import { useColors } from '../common/colors';
import ErrorBoundary from 'react-native-error-boundary';
import { ThemeSwitch, ThemeText, ThemeTextInput } from '../common/ThemeTypes'
import * as Application from 'expo-application';
import { ToastType, useToast } from '../common/ToastProvider';

const Settings = () => {
  const { showToast, hideToast } = useToast();
  const colors = useColors();
  const { settings, updateSettings } = useContext(SettingsContext);

  const [url, setUrl] = useState('');
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [isSystemTheme, setIsSystemTheme] = useState(settings.systemTheme);
  const [isDarkMode, setIsDarkMode] = useState(settings.darkTheme);
  const [requireAuth, setRequireAuth] = useState(settings.requireAuth);
  const [isSaving, setIsSaving] = useState(false);

  useEffect(() => {
    if (settings) {
      setUrl(settings.url || '');
      setUsername(settings.username || '');
      setPassword(settings.password || '');
      setIsSystemTheme(settings.systemTheme);
      setIsDarkMode(settings.darkTheme);
      setRequireAuth(settings.requireAuth);
    }
  }, [settings]);

  const handleSave = async () => {
    if (isSaving) return;

    try {
      setIsSaving(true);
      await updateSettings({
        url,
        username,
        password,
        systemTheme: isSystemTheme,
        darkTheme: isDarkMode,
        requireAuth,
      });
      hideToast()
    } catch (error) {
      console.error('Error updating settings:', error);
      Alert.alert('Error', 'Failed to save settings.');
    } finally {
      setIsSaving(false);
    }
  };

  const handleLinkPress = (url) => {
    Linking.openURL(url);
  };

  const handleChange = (setter) => (value) => {
    setter(value);
    showToast(ToastType.Warn, 'Ungespeicherte Änderungen');
  };

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      padding: 20,
    },
    label: {
      fontWeight: 'bold',
      marginBottom: 8,
    },
    title: {
      fontWeight: 'bold',
      marginBottom: 3,
      fontSize: 32,
    },
    section: {
      marginBottom: 40,
    },
    endSection: {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
    },
    input: {
      padding: 10,
      marginBottom: 20,
    },
    switchContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingVertical: 5,
    },
    activityindicator: {
      position: 'absolute',
      width: '100%',
      height: '100%',
    },
    logo: {
      width: 100,
      height: 100,
      resizeMode: 'contain'
    }
  });

  return (
    <ErrorBoundary>
      <ScrollView style={[styles.container, { backgroundColor: colors.backPrimary }]}>
        <View style={styles.section}>
          <ThemeText style={styles.title}>Server</ThemeText>
          <ThemeText style={styles.label}>URL</ThemeText>
          <ThemeTextInput
            style={[styles.input]}
            value={url}
            onValueChange={handleChange(setUrl)}
            placeholder="URL"
          />
          <View style={styles.switchContainer}>
            <ThemeText>Authentifizierung</ThemeText>
            <ThemeSwitch
              value={requireAuth}
              onValueChange={handleChange(setRequireAuth)}
            />
          </View>

          <ThemeText style={styles.label}>Benutzername</ThemeText>
          <ThemeTextInput
            style={[styles.input]}
            value={username}
            onValueChange={handleChange(setUsername)}
            placeholder="Benutzername"
            disabled={!requireAuth}
          />
          <ThemeText style={styles.label}>Passwort</ThemeText>
          <ThemeTextInput
            style={[styles.input]}
            value={password}
            onValueChange={handleChange(setPassword)}
            secureTextEntry
            placeholder="Passwort"
            disabled={!requireAuth}
          />
        </View>
        <View style={styles.section}>
          <ThemeText style={styles.title}>Darstellung</ThemeText>
          <View style={styles.switchContainer}>
            <ThemeText>Automatisch (Systemeinstellung)</ThemeText>
            <ThemeSwitch
              value={isSystemTheme}
              onValueChange={handleChange(setIsSystemTheme)}
            />
          </View>

          <View style={styles.switchContainer}>
            <ThemeText>Dark Mode</ThemeText>
            <ThemeSwitch
              value={isDarkMode}
              disabled={isSystemTheme}
              onValueChange={handleChange(setIsDarkMode)}
            />
          </View>
        </View>

        <View style={styles.section}>
          <Button title={isSaving ? "" : "Speichern"} onPress={handleSave} disabled={isSaving} />
          {isSaving && <ActivityIndicator size="small" color={colors.primary} style={styles.activityindicator} />}
        </View>

        <View style={[styles.section, {marginTop: 20}]}>
          <ThemeText>EDV-Schule Plattling</ThemeText>
          <TouchableOpacity onPress={() => handleLinkPress('https://www.edvschule-plattling.de/impressum')}>
            <Text style={{ color: colors.primary }}>Impressum</Text>
          </TouchableOpacity>
        </View>
        <View style={[styles.section, styles.endSection]}>
          <View>
            { /* Wer des löscht werd weggeklagt */}
            <ThemeText>Heinrich Thaler</ThemeText>
            <TouchableOpacity onPress={() => handleLinkPress('https://www.it-thaler.de')}>
              <Text style={{ color: colors.primary }}>www.it-thaler.de</Text>
            </TouchableOpacity>
            <ThemeText>Juli 2024</ThemeText>
            {Platform.OS != 'web' && <ThemeText>Version: {Application.nativeApplicationVersion} ({Application.nativeBuildVersion})</ThemeText>}
          </View>
          <Image style={styles.logo} source={require('../assets/logo-thaler.png')} />
        </View>
      </ScrollView>
    </ErrorBoundary>
  );
};

export default Settings;