import React from 'react';
import { LinearGradient } from 'expo-linear-gradient';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { BlurView } from 'expo-blur';
import { StyleSheet } from 'react-native';
import backgroundColors from './Themes';

// Own views
import LiveTrainingView from './LiveTrainingView';
import HomeView from './HomeView';
import { connect } from 'react-redux';


const Stack = createStackNavigator();


function ThemedStackNavigation(props) {

    const screenOptions = {
        cardStyle: {
            backgroundColor: "transparent",
            opacity: 1
        },
        headerTransparent: "true",
        headerTitleStyle: {
            color: 'white',
            fontWeight: 'bold',
            fontSize: "1.5em",
        },
        headerTintColor: "white",
        headerBackground: () => (
            <BlurView
                tint="dark"
                intensity={30}
                style={StyleSheet.absoluteFill}
            />
        ),
    }

    return (
        <LinearGradient
            colors={backgroundColors[props.themeName]}
            start={[0, 0]}
            end={[0.5, 1]}
            style={{ flex: 1 }}
        >
            <NavigationContainer>
                <Stack.Navigator initialRouteName="Home">
                    <Stack.Screen
                        name="Home"
                        component={HomeView}
                        options={{ ...screenOptions, headerTitle: "SwimTracker" }}
                    />
                    <Stack.Screen
                        name="Training"
                        component={LiveTrainingView}
                        options={{ ...screenOptions, headerTitle: "Training" }}
                    />
                </Stack.Navigator>
            </NavigationContainer>
        </LinearGradient>
    )
};

const mapStateToProps = (state) => {
    return { themeName: state.settings.theme };
};

export default connect(mapStateToProps)(ThemedStackNavigation);