import React from 'react';
import ReactDOM from 'react-dom';

import {
    PureFrameRoot,
    defineExtractor,
    defineStateEventHandler,
    defineView,
} from 'pure-frame';

// Step 1: create pure function component.
const ClickCount = ({ count, increase }) => (
    <>
      <h1>Hello pure-frame</h1>
      <p>
        <label>Count is: </label>
        <span>{count}</span>
      </p>
      <p>
        <button onClick={increase}>Increase</button>
      </p>
    </>
);

// Step 2: define view, injects formulas and declares events.
const ClickCountView = defineView({
    inject: {
        ':count': 'count'
    },
    events: {
        'increase': ':increase'
    }
}, ClickCount);

// Step 3: provide data (from application global state) for component.
defineExtractor(':count', 'count');

// Step 4: handle event from component.
defineStateEventHandler(':increase', state =>
    state.update('count', count => count + 1));

// Step 5: Compose components.
ReactDOM.render(
    <PureFrameRoot state={{ count: 0 }}>
      <ClickCountView />
    </PureFrameRoot>,
    document.getElementById('app')
);