import { createContext, useContext, useMemo, useState, useLayoutEffect } from 'react';
import { bindActionCreators } from 'redux';

// 创建上下文对象
const ThemeContext = createContext();

// Provider
export function Provider(props) {
    return (
        <ThemeContext.Provider
            value={{
                store: props.store
            }}>
            {props.children}
        </ThemeContext.Provider>
    )
};

// connect
export function connect(mapStateToProps, mapDispatchToProps) {
    if (!mapStateToProps) {
        mapStateToProps = function mapStateToProps() {
            return {};
        };
    }
    if (!mapDispatchToProps) {
        mapDispatchToProps = function mapDispatchToProps() {
            return {};
        };
    }
    return function HOC(Component) {
        return function Proxy(props) {
            let { store } = useContext(ThemeContext),
                { getState, dispatch, subscribe } = store;

            // 处理状态
            let state = getState();
            state = useMemo(() => mapStateToProps(state), [state]);

            // 处理任务派发
            let dispatchToProps = useMemo(() => {
                if (typeof mapDispatchToProps === 'function') {
                    return mapDispatchToProps(dispatch);
                }
                return bindActionCreators(mapDispatchToProps, dispatch);
            }, [dispatch]);

            // 向事件池注入方法
            const [, forceUpdate] = useState(0);
            useLayoutEffect(() => {
                return subscribe(() => forceUpdate(+new Date()));
            }, [subscribe]);

            return <Component 
                {...props} 
                {...state} 
                {...dispatchToProps} 
            />
        }
    }
};