import React, {createContext, useEffect} from 'react';
import {Text} from "react-native";
import {useDispatch, useSelector} from "react-redux";
import {loadMeReducer} from "./reducers/user";
import styled from "styled-components";

export const AuthContext = createContext({});
export const AuthProvider = (props) => {
    const {children, user} = props;
    const {info} = useSelector(state => state.info);

    const dispatch = useDispatch();
    useEffect(() => {
        if (user) {
            dispatch({
                type: loadMeReducer,
                data: {user}
            });
        }
    }, [user]);

    return (
        <AuthContext.Provider>
            {children}
            {info
                ? <Info><Text
                    style={{
                        textAlign: 'center',
                        fontSize: 14,
                        color: '#bc324a'
                    }}>{info}</Text></Info>
                : <></>
            }
        </AuthContext.Provider>
    )
};

const Info = styled.TouchableOpacity`
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 300px;
    height: 50px;
    border-radius: 5px;
    border: 1px solid #17174B;
    backgroundColor: #ffffff;
    justifyContent: center;
`;