import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getToken } from '../../services/api/tokenService';
import useActions from '../../hooks/useActions';
import { AppState } from '../../reducers';
import Spinner from '../../spinner/spinner';
import { getCurrentUser } from '../../services/api/usersService';
import * as userActions from '../../actions/user/user-action';
import { bindActionCreators } from 'redux';

const UserContainer = () => {
    const [loading, setLoading] = useState(false);

    const token = getToken();
    if (!token) {
        throw new Error('Ошибка. Нет токена!');
    }

    const user = useSelector((s: AppState) => s.user.currentUser);
    // todo: разобраться с типами, и обновить useActions, что бы он стал типизированным
    const dispatch = useDispatch();
    const { setUser } = bindActionCreators(userActions, dispatch);

    if (!user) {
        setLoading(true);
        getCurrentUser()
            .then(user => {
                setUser(user);
                setLoading(false);
            })
            .catch(err => {
                throw new Error(err);
            });
    }

    return (
        <React.Fragment>
            {loading ? (
                <Spinner message={'Загрузка пользователя...'} />
            ) : (
                <div>
                    Мы тут подгрузили пидора {user ? user.displayName : ''}
                </div>
            )}
        </React.Fragment>
    );
};

export default UserContainer;