// const justact = require('justact');
import * as justact from 'justact';

import { ForEach } from 'justact';

class InputMultiplex extends justact.Component {
    render () {
        return this.swap ? (
            <input value={this.valueB$} type="text" />
        ) : (
            <input value={this.valueA$} type="text" />
        )
    }
}

class App extends justact.Component {
    render () {
        return (
            <div>
                <input  type="checkbox" value={this.swap$} />
                <InputMultiplex swap={this.swap$}></InputMultiplex>
                <ForEach array={[1,2,3]} render={item => (
                    <input value={item} disabled />
                )} />
            </div>
        )
    }
}

// TODO: This should be a single function call;
// maybe like: justact.append(document.body, new App())
document.addEventListener('DOMContentLoaded', () => {
    const root = new App({});
    const elements = root.createElements();

    console.log('app', root);

    for ( const element of elements ) {
        document.body.append(element);
    }

    root.notifyMounted({ parent: document.body });
});