import { navigationRef } from '@common-stack/client-react';
import { Button, ButtonText } from '@gluestack-ui/themed';
import * as React from 'react';
import { StyleSheet } from 'react-native';

import { SafeAreaView, Text, View } from 'react-native';
import { useDispatch } from 'react-redux';

type Props = { error: Error };

export const FallbackComponent = (props: Props) => {
    const dispatch = useDispatch();
    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.content}>
                <Text style={styles.title}>Oops!</Text>
                <Text style={styles.subtitle}>{"There's an error"}</Text>
                <Text style={styles.error}>{props?.error?.message}</Text>
                <Button style={styles.button} onPress={() => navigationRef.navigate('MainStack.Layout.Home')}>
                    <ButtonText style={styles.buttonText}>Go to homepage</ButtonText>
                </Button>
            </View>
        </SafeAreaView>
    );
};

const styles: any = StyleSheet.create({
    container: {
        backgroundColor: '#fafafa',
        flex: 1,
        justifyContent: 'center',
    },
    content: {
        marginHorizontal: 16,
    },
    title: {
        fontSize: 48,
        fontWeight: '300',
        paddingBottom: 16,
        color: '#000',
    },
    subtitle: {
        fontSize: 32,
        fontWeight: '800',
        color: '#000',
    },
    error: {
        paddingVertical: 16,
    },
    button: {
        backgroundColor: '#2196f3',
        borderRadius: 50,
        padding: 25,
        height: 40,
    },
    buttonText: {
        color: '#fff',
        fontWeight: '600',
        textAlign: 'center',
    },
});