crazycharge-app/component/registrationMultiStepForm/formComponent/formPages/languageSwitcher.tsx

import React, {useEffect, useState} from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Alert, Switch } from 'react-native';
import { useTranslation } from '../../../../util/hooks/useTranslation';
import { Language } from '../../../../i18n/types';

const LanguageSwitcher: React.FC = () => {
  const { 
    switchLanguage, 
    getSupportedLanguages, 
    getCurrentLanguageConfig,
    format 
  } = useTranslation();
  
  const currentLanguage = getCurrentLanguageConfig();
  
  const [isEnabled, setIsEnabled] = useState<boolean>(false);
  useEffect(() => {
    console.log('currentLanguage....', currentLanguage);
    const init = async () => {
      const aa = await currentLanguage?.value || false;
      setIsEnabled(aa);
    };
    init();
  }, [currentLanguage]);

  const handleLanguageChange = async (newValue: boolean) => {
    if (newValue) {
      await switchLanguage('zh-TW');
    } else {
      await switchLanguage('en');
    }
    await setIsEnabled(newValue);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>En</Text>
      <Switch
        trackColor={{ false: "#cccccc", true: "#02677D" }}
        thumbColor={isEnabled ? "#ffffff" : "#f4f3f4"}
        onValueChange={handleLanguageChange}
        value={isEnabled}
      />
      <Text style={styles.title}>繁</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  title: {
    color: '#333333',
    marginRight: 5,
    marginLeft: 5,
    fontSize: 18,
  },
  languageList: {
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  languageItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  selectedLanguage: {
    backgroundColor: '#007AFF',
  },
  languageText: {
    fontSize: 16,
  },
  selectedLanguageText: {
    color: '#FFFFFF',
    fontWeight: 'bold',
  },
  selectedIndicator: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default LanguageSwitcher;