import { html } from 'hybrids';
import store, { increment, decrement } from './redux';

const connect = (store, mapState) => ({
  get: mapState ? () => mapState(store.getState()) : () => store.getState(),
  connect: (host, key, invalidate) => store.subscribe(invalidate),
});

const onInc = ({ offset }) => store.dispatch(increment(offset));
const onDec = ({ offset }) => store.dispatch(decrement(offset));

export default {
  count: connect(store, (state) => state.count),
  offset: 1,
  render: ({ count, offset }) => html`
    <style>:host { display: block; }</style>

    <button onclick="${onInc}">+${offset}</button>
    <button onclick="${onDec}">-${offset}</button>

    <p>Count: ${count}</p>
  `,
};