klatab/screens/Settings.tsx

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

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',
      marginTop: 8,
      marginBottom: 6,
    },
    title: {
      fontWeight: 'bold',
      marginBottom: 3,
      fontSize: 32,
    },
    section: {
      marginBottom: 40,
    },
    endSection: {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
    },
    switchContainer: {
      marginTop: 10,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
    },
    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}>Login</ThemeText>
          <ThemeText style={styles.label}>Benutzername</ThemeText>
          <ThemeTextInput
            value={username}
            onValueChange={handleChange(setUsername)}
            placeholder="Benutzername"
            disabled={!requireAuth}
          />
          <ThemeText style={styles.label}>Passwort</ThemeText>
          <ThemeTextInput
            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}>
          <AdvancedSettings
            url={url}
            requireAuth={requireAuth}
            onUrlChange={setUrl}
            onRequireAuthChange={setRequireAuth}
          />
        </View>

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

        <Credits />
      </ScrollView>
    </ErrorBoundary>
  );
};

export default Settings;



export const CredentialsInput = ({ username, password, onUsernameChange, onPasswordChange, requireAuth }) => {
  const styles = StyleSheet.create({
    section: {
      marginBottom: 40,
    },
    label: {
      fontWeight: 'bold',
      marginTop: 8,
      marginBottom: 6,
    },
  });
  return (
    <View style={styles.section}>
      <ThemeText style={styles.label}>Benutzername</ThemeText>
      <ThemeTextInput
        value={username}
        onValueChange={onUsernameChange}
        placeholder="Benutzername"
        disabled={!requireAuth}
      />
      <ThemeText style={styles.label}>Passwort</ThemeText>
      <ThemeTextInput
        value={password}
        onValueChange={onPasswordChange}
        secureTextEntry
        placeholder="Passwort"
        disabled={!requireAuth}
      />
    </View>
  );
};



export const AdvancedSettings = ({ url, requireAuth, onUrlChange, onRequireAuthChange }) => {
  const [showAdvanced, setShowAdvanced] = useState(false);
  const [rotateAnim] = useState(new Animated.Value(0)); // Animation state for the arrow
  const [advancedHeightAnim] = useState(new Animated.Value(0)); // Animation state for the advanced settings height
  const advancedSectionRef = useRef(null);
  const colors = useColors();

  const toggleAdvancedSettings = () => {
    setShowAdvanced(!showAdvanced);

    // Rotate the arrow
    Animated.timing(rotateAnim, {
      toValue: showAdvanced ? 0 : 1,
      duration: 200,
      useNativeDriver: true,
    }).start();

    // Animate the height of the advanced settings
    const targetHeight = showAdvanced ? 0 : 150; // You can adjust this height
    Animated.timing(advancedHeightAnim, {
      toValue: targetHeight,
      duration: 300,
      useNativeDriver: false,
    }).start();
  };

  const arrowRotation = rotateAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '90deg'],
  });

  const styles = StyleSheet.create({
    arrowContainer: {
      display: 'flex',
      justifyContent: 'center',
      marginVertical: 20,
      flexDirection: 'row',
      alignItems: 'center',
    },
    advancedButtonText: {
      marginLeft: 8,
      fontSize: 16,
      color: colors.text,
    },
    advancedSection: {
      overflow: 'hidden',
    },
    label: {
      fontWeight: 'bold',
      marginTop: 8,
      marginBottom: 6,
    },
    switchContainer: {
      marginTop: 15,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
    },
  });

  return (
    <>
      {/* Toggle button */}
      <TouchableOpacity style={styles.arrowContainer} onPress={toggleAdvancedSettings}>
        <Animated.View style={{ transform: [{ rotate: arrowRotation }] }}>
          <FontAwesome5 name="angle-right" size={24} color={colors.textAccent} />
        </Animated.View>
        <Text style={styles.advancedButtonText}>
          {showAdvanced ? 'Erweiterte Einstellungen verbergen' : 'Erweiterte Einstellungen anzeigen'}
        </Text>
      </TouchableOpacity>

      {/* Animated section for advanced settings */}
      <Animated.View style={[styles.advancedSection, { height: advancedHeightAnim }]}>
        <View ref={advancedSectionRef}>
          <ThemeText style={styles.label}>URL</ThemeText>
          <ThemeTextInput
            value={url}
            onValueChange={onUrlChange}
            placeholder="URL"
          />
          <View style={styles.switchContainer}>
            <ThemeText>Authentifizierung</ThemeText>
            <ThemeSwitch
              value={requireAuth}
              onValueChange={onRequireAuthChange}
            />
          </View>
        </View>
      </Animated.View>
    </>
  );
};