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

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

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

    render() {
        const left = (
                <Button
                    type="diminished"
                    click={ this.toggle.bind(this, false) }>
                    Cancel
                </Button>
            ),
            right = (
                <Button click={ this.toggle.bind(this, false) }>
                    Save
                </Button>
            );

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

                <Card
                    header="A Card Title"
                    left={ left }
                    right={ right }
                    isOpen={ this.state.open }>
                    <Address.View abbreviated />
                    <Address.View abbreviated />
                    <Address.View abbreviated />
                    <Address.View abbreviated />
                </Card>
            </div>
        );
    }
}

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