import React from 'react';
import ReactDOM from 'react-dom';
import { Button, Pane } from 'web-foundation';

class PaneController extends React.Component {
    state = {
        openLeft: false,
        openRight: false
    };

    toggle(open, side = 'left') {
        const nextState = {};

        if (side === 'left') {
            nextState.openLeft = open;
        } else {
            nextState.openRight = open;
        }

        this.setState(nextState);
    }

    render() {
        return (
            <div>
                <Button click={ this.toggle.bind(this, true, 'left') }>
                    Open Left Pane
                </Button>

                <Button click={ this.toggle.bind(this, true, 'right') }>
                    Open Right Pane
                </Button>

                <Pane
                    header="A Pane Title"
                    fromSide="left"
                    onClickClose={ this.toggle.bind(this, false, 'left') }
                    isOpen={ this.state.openLeft }>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Phasellus sit amet tincidunt turpis. Cras egestas.

                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Maecenas nec mauris rutrum, ultricies nisi at, rhoncus
                    lorem. Etiam porta nibh neque, eget sollicitudin ante
                    posuere vitae. Fusce euismod at ante.
                </Pane>

                <Pane
                    header="A Pane Title"
                    fromSide="right"
                    onClickClose={ this.toggle.bind(this, false, 'right') }
                    isOpen={ this.state.openRight }>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Phasellus sit amet tincidunt turpis. Cras egestas.

                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Maecenas nec mauris rutrum, ultricies nisi at, rhoncus
                    lorem. Etiam porta nibh neque, eget sollicitudin ante
                    posuere vitae. Fusce euismod at ante.
                </Pane>
            </div>
        );
    }
}

export default function() {
    ReactDOM.render(
        <PaneController />,
        document.getElementById('pane')
    );
}
