import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'web-foundation';
import {
    View as CardStack,
    Leaf
} from 'web-foundation/components/card-stack';

class ExampleLeafOneView extends React.Component {
    render() {
        return (
            <div>
                <h1>I am example leaf one</h1>
                <Button click={ () => { this.props.onDone(); } }>
                    Next
                </Button>
            </div>
        );
    }
}

class ExampleLeafTwoView extends React.Component {
    render() {
        return (
            <div>
                <h1>I am example leaf two</h1>
                <Button click={ () => { this.props.onDone(); } }>
                    Next
                </Button>
            </div>
        );
    }
}

class ExampleLeafThreeView extends React.Component {
    render() {
        return (
            <div>
                <h1>I am example leaf three</h1>
                <Button click={ () => { this.props.onDone(); } }>
                    Next
                </Button>
            </div>
        );
    }
}

class ExampleLeafOne extends Leaf {
    view = ExampleLeafOneView;
}

class ExampleLeafTwo extends Leaf {
    view = ExampleLeafTwoView;
    allowBack = true;
}

class ExampleLeafThree extends Leaf {
    view = ExampleLeafThreeView;
    allowBack = true;
}

class ExampleStack extends CardStack {
    header = 'Card Stack Example';

    generateStack() {
        return [
            new ExampleLeafOne(this),
            new ExampleLeafTwo(this),
            new ExampleLeafThree(this)
        ];
    }
}

class CardStackController extends React.Component {
    state = {
        open: false
    };

    toggle(open) {
        this.setState({ open });
    }

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

                <ExampleStack isOpen={ this.state.open }
                    onClose={ this.toggle.bind(this, false) } />
            </div>
        );
    }
}

export default function() {
    ReactDOM.render(
        <CardStackController />,
        document.getElementById('card-stack')
    );
}
