import * as React from 'react';
import { createStore, Action, Dispatch,combineReducers } from 'redux';
import { connect } from 'react-redux';
import { Button } from 'antd';

export interface CrementAction extends Action{
    by: number;
} 

let store = createStore((state, action: CrementAction) => {
    switch (action.type) {
        case 'INCR':
            return { counter: state.counter + action.by };
        default:
            return state;
    }
}, { counter: 0 });

export function addTodo(text) {
    return { type: 'ADD_TODO', text };
}

export function toggleTodo(index) {
    return { type: 'TOGGLE_TODO', index };
}

export function setVisibilityFilter(filter) {
    return { type: 'SET_VISIBILITY_FILTER', filter };
}

const boundAddTo = (text) => store.dispatch(addTodo(text));

export function reducer1(state, action) {
    switch (action.state) {
        case 'R1_A1':
            return Object.assign({}, state, { a1: 1 });

        case "R1_A2":
            return Object.assign({}, state, { a2: 2 });
    }
}

export function reducer2(state, action) {
    switch (action.state) {
        case 'R2_A1':
            return Object.assign({}, state, { b1: 1 });

        case "R2_A2":
            return Object.assign({}, state, { b2: 2 });
    }
}

combineReducers({ reducer1, reducer2 });


/**
 *
 * 这里准备用Redux来试验数据的更新
 * 保持reducer的纯净非常重要，不要在reducer中做以下操作
 * 1、修改传入的参数。
 * 2、执行有副作用的操作，如API请求与路由跳转。
 * 3、调用非纯函数，如Date.now()或者Math.random()
 * 因此，纯函数的意义是只要传入的参数相同，返回得到的下一个state就一定要相同。没有特殊情况，没有副作用，没有API请求，没有变量修改，单纯属执行计算
 */
export class RolePanel extends React.Component<any, any>{
    private unsubscribe: Function;
    constructor(props,context) {
        super(props, context);
        this.state = { counter: 0 };
    }

    componentDidMount(): void{
        this.unsubscribe = store.subscribe(() => {
            this.forceUpdate();
            console.log('state:', store.getState());
        });
    }

    componentWillUnmount() {
        this.unsubscribe();
    }

    render() {
        var a = { hp: 1 };
        var b = { mp: 2 };
        console.log(Object.assign({}, a, b));
        return (
            <div>
                <p><label>Counter:</label><b>#{store.getState().counter}</b></p>
                <Button onClick={e => { store.dispatch({ type: 'INCR', by: 1 }) } }>增加</Button>
                <span style={{padding:'0 5px'}}/>
                <Button onClick={e => { store.dispatch({ type: 'INCR', by: -1 }) } }>减少</Button>
            </div>
        );
    }
}

// const mapStateToProps = (state) => state;
// const mapDispatchToProps = (dispatch:Dispatch<any>) => ({
//     incr: () => { 
//         dispatch({ type: 'INCR', by: 1 });
//     },
//     decr: () => {
//         dispatch({ type: 'INCR', by: -1 });
//     }
// });
// export default connect(mapStateToProps, mapDispatchToProps)(RolePanel);