import * as React from "react";
import { render } from "react-dom";
import { Store, createStore } from "redux";
import { Provider, connect } from "react-redux";

interface AppState {
    count: number
}

interface Type {
    type: string
}

type Action<T> = Type & T;

const initial: AppState = {
    count: 0
};

const reducer = (state: AppState = initial, action: Action<{}>): AppState => {
    switch (action.type) {
        case 'ADD':
            return { count: state.count + 1 };
        case 'SUB':
            return { count: state.count - 1 };
        default:
            return state;
    }
};

const store: Store<AppState> = createStore(reducer);

interface StateProps {
    count: number
}

interface DispatchProps {
    onAdd: <T>(event: React.MouseEvent<T>) => void
    onSub: <T>(event: React.MouseEvent<T>) => void
}

type AppProps = StateProps & DispatchProps;

const AppRedux = (props: AppProps): JSX.Element =>
    <div>
        <button onClick={ props.onSub }>-</button>
        { props.count }
        <button onClick={ props.onAdd }>+</button>
    </div>
;

const mapStateToProps = (state: AppState): StateProps => ({
    count: state.count
});

const mapDispatchToProps = (dispatch: (action: Action<{}>) => void): DispatchProps => ({
    onAdd<T>(event: React.MouseEvent<T>): void {
        dispatch({ type: 'ADD' });
    },
    onSub<T>(event: React.MouseEvent<T>): void {
        dispatch({ type: 'SUB' });
    }
});

const App = connect(
    mapStateToProps,
    mapDispatchToProps
)(AppRedux)

render(
    <Provider store={ store }>
        <App />
    </Provider>,
    document.querySelector('#app')
);