import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { useTheme } from '../../theme/ThemeProvider';
import { styles } from './styles';

const ThemeSwitcher: React.FC = () => {
    const { theme, themeName, brandName, toggleTheme, setBrand } = useTheme();

    const dynamicStyles = styles(theme);

    return (
        <View style={dynamicStyles.container}>
            <Text style={dynamicStyles.title}>Theme Controls</Text>

            {/* Theme Toggle */}
            <TouchableOpacity
                style={dynamicStyles.button}
                onPress={toggleTheme}
            >
                <Text style={dynamicStyles.buttonText}>
                    Switch to {themeName === 'light' ? 'Dark' : 'Light'}
                </Text>
            </TouchableOpacity>

            {/* Brand Switcher */}
            <View style={dynamicStyles.brandRow}>
                <TouchableOpacity
                    style={[
                        dynamicStyles.brandButton,
                        brandName === 'lloyds' && dynamicStyles.brandButtonActive
                    ]}
                    onPress={() => setBrand('lloyds')}
                >
                    <Text style={[
                        dynamicStyles.brandText,
                        brandName === 'lloyds' && dynamicStyles.brandTextActive
                    ]}>
                        Lloyds
                    </Text>
                </TouchableOpacity>

                <TouchableOpacity
                    style={[
                        dynamicStyles.brandButton,
                        brandName === 'brandA' && dynamicStyles.brandButtonActive
                    ]}
                    onPress={() => setBrand('brandA')}
                >
                    <Text style={[
                        dynamicStyles.brandText,
                        brandName === 'brandA' && dynamicStyles.brandTextActive
                    ]}>
                        Brand A
                    </Text>
                </TouchableOpacity>

                <TouchableOpacity
                    style={[
                        dynamicStyles.brandButton,
                        brandName === 'brandB' && dynamicStyles.brandButtonActive
                    ]}
                    onPress={() => setBrand('brandB')}
                >
                    <Text style={[
                        dynamicStyles.brandText,
                        brandName === 'brandB' && dynamicStyles.brandTextActive
                    ]}>
                        Brand B
                    </Text>
                </TouchableOpacity>
            </View>

            <Text style={dynamicStyles.info}>
                Current: {brandName} ({themeName})
            </Text>
        </View>
    );
};

export default ThemeSwitcher;