import _ from 'lodash';
import React from 'react';
import createClass from 'create-react-class';
import { Button, Dialog } from '../../../index';

export default createClass({
	getInitialState() {
		return {
			isShown: false,
		};
	},

	handleShow(isShown: any) {
		this.setState({ isShown });
	},

	render() {
		return (
			<div>
				<Button onClick={_.partial(this.handleShow, !this.state.isShown)}>
					Toggle
				</Button>

				<Dialog
					isShown={this.state.isShown}
					handleClose={_.partial(this.handleShow, !this.state.isShown)}
					size='large'
				>
					<Dialog.Header>
						<i>Rich Header</i>
					</Dialog.Header>
					<div key={'info'}>
						For better UX, we recommend NOT handling onEscape and
						onBackgroundClick when isModal is true. The term "modal" implies
						that the user needs to interact with one of the buttons in the
						footer to exit the dialog.
					</div>
					{_.times(50).map(i => {
						return <div key={i}>Body</div>;
					})}
					<Dialog.Footer>
						<Button
							kind='invisible'
							onClick={_.partial(this.handleShow, false)}
							style={{ marginRight: '9px' }}
						>
							Cancel
						</Button>
						<Button kind='primary'>Save</Button>
					</Dialog.Footer>
				</Dialog>
			</div>
		);
	},
});