import React, { useEffect, useMemo } from 'react';
import { FlatList, StyleSheet, TouchableOpacity, View } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import AppText from '../../components/AppText';
import MainContainer from '../../components/MainContainer';
import { AppMargin, AppPadding } from '../../constants/commonStyle';
import { settings } from '../../constants/string';
import { t } from '../../i18n';
import { AppDispatch } from '../../store';
import { setIsLogin, setLocalize } from '../../store/reducers/commonData.slice';
import { useTheme } from '../../theme/ThemeProvider';
import { useThemeControl } from '../../theme/themeControl';
import { NavigationKeys } from '../../constants/navigationKeys';
import { _showToast } from '../../services/UIs/ToastConfig';

interface SettingScreenProps {
	navigation: any;
}

const SettingScreen = (props: SettingScreenProps) => {

	const { Colors, isDarkMode } = useTheme();
	const { setDarkMode, setLightMode, setDefaultTheme } = useThemeControl();
	const styles = useMemo(() => createStyles(Colors), [Colors]);

	const dispatch: AppDispatch = useDispatch();
	const commonData = useSelector((state: any) => state.commonData);

	const handleLogout = () => {
		props.navigation.navigate(NavigationKeys.AuthNavigator)
		dispatch(setIsLogin(false))
		_showToast('Logout Successful', 'success');
	}

	useEffect(() => {
	}, [commonData.localize])


	const handleSettings = (itemTitle: string) => {
		// Define types for themeActions and localizeActions || Any Other

		type ThemeActions = { [key: string]: () => void };
		type LocalizeActions = { [key: string]: () => void };
		type AccountAction = { [key: string]: () => void };

		const themeActions: ThemeActions = {
			'default_Theme': setDefaultTheme,
			'dark_Theme': setDarkMode,
			'light_Theme': setLightMode,
		};

		const localizeActions: LocalizeActions = {
			'english': () => setLocalizeAndShow('en'),
			'japanese': () => setLocalizeAndShow('jp'),
			'espanol': () => setLocalizeAndShow('sp'),
		};

		function setLocalizeAndShow(locale: string) {
			dispatch(setLocalize(locale));
			_showToast('Changed Successfully', 'success');
		}

		const AccountActions: AccountAction = {
			'logout': () => handleLogout(),
		};

		themeActions[itemTitle]?.();
		localizeActions[itemTitle]?.();
		AccountActions[itemTitle]?.();
	};

	return (
		<MainContainer>
			<View style={{ marginHorizontal: 20, flex: 1 }}>
				<FlatList
					data={settings}
					extraData={settings}
					key={`1`}
					contentContainerStyle={styles.flatListContainer}
					keyExtractor={(item, index) => item.id + index.toString()}
					renderItem={({ item, index }) => {
						return (
							<View style={{ paddingVertical: AppPadding._20, flex: 1 }}>
								<AppText textColor={Colors.primary} label={t(item.title)} />
								<View style={{ marginVertical: AppMargin._20, height: 1, backgroundColor: Colors.primary }} />
								<FlatList
									data={item.value}
									key={`2`}
									extraData={item.value}
									keyExtractor={(subItem) => subItem.id.toString()}
									ItemSeparatorComponent={() => <View style={{ marginVertical: AppMargin._5 }} />}
									renderItem={({ item: subItem }) => (
										<TouchableOpacity
											onPress={() => handleSettings(subItem.title)}
											style={{ padding: 20, backgroundColor: Colors.primaryTransparent }}>
											<AppText textColor={subItem.title === 'logout' ? Colors.error : Colors.text} label={t(subItem.title)} />
										</TouchableOpacity>
									)}
								/>
							</View>
						)
					}}
				/>
			</View>
		</MainContainer>
	);
};

const createStyles = (Colors: any) => {
	return StyleSheet.create({
		flatListContainer: {
			paddingBottom: AppMargin._75,
			justifyContent: 'space-between',
		},
	});
};

export default SettingScreen;