import * as React from "react";
import * as ReactDOM from "react-dom";
import {
	closeMenu,
	openMenu,
	Wrapper,
	Button,
	Menu,
	MenuItem
} from "react-aria-menubutton";

const menuItemWords = ["foo", "bar", "baz"];

class MyMenuButton extends React.Component {
	render() {
		const menuItems = menuItemWords.map((word, i) => {
			return (
				<li key={i}>
					<MenuItem className="MyMenuButton-menuItem">
						{word}
					</MenuItem>
				</li>
			);
		});

		return (
			<Wrapper
				className="MyMenuButton"
				onSelection={(value, event) => console.log(value, event)}
			>
				<Button className="MyMenuButton-button">click me</Button>
				<Menu className="MyMenuButton-menu">
					<ul>
						{menuItems}
					</ul>
				</Menu>
			</Wrapper>
		);
	}
}

ReactDOM.render(<MyMenuButton />, document.body);

const words = [
	"pectinate",
	"borborygmus",
	"anisodactylous",
	"barbar",
	"pilcrow",
	"destroy"
];

interface DemoOneState {
	selected: string;
	noMenu: boolean;
}

class DemoOne extends React.Component<{}, DemoOneState> {
	state = { selected: "", noMenu: false };

	handleSelection(value: string) {
		if (value === "destroy") {
			this.setState({ noMenu: true });
		} else {
			this.setState({ selected: value });
		}
	}

	render() {
		const { selected, noMenu } = this.state;

		if (noMenu) {
			return (
				<div>
					[You decided to "destroy this menu," so the menu has been destroyed,
					according to your wishes. Refresh the page to see it again.]
				</div>
			);
		}

		const menuItemElements = words.map((word, i) => {
			let itemClass = "AriaMenuButton-menuItem";
			if (selected === word) {
				itemClass += " is-selected";
			}
			const display = word === "destroy" ? "destroy this menu" : word;
			return (
				<li className="AriaMenuButton-menuItemWrapper" key={i}>
					<MenuItem className={itemClass} value={word} text={word}>
						{display}
					</MenuItem>
				</li>
			);
		});

		return (
			<div>
				<Wrapper
					className="AriaMenuButton"
					onSelection={this.handleSelection.bind(this)}
				>
					<Button className="AriaMenuButton-trigger">Select a word</Button>
					<Menu>
						<ul className="AriaMenuButton-menu">
							{menuItemElements}
						</ul>
					</Menu>
				</Wrapper>
				<span style={{ marginLeft: "1em" }}>
					Your last selection was: <strong>{selected}</strong>
				</span>
			</div>
		);
	}
}

ReactDOM.render(<DemoOne />, document.getElementById("demo-one"));

closeMenu("");
closeMenu("", { focusButton: true });

openMenu("");
openMenu("", { focusMenu: true });

class ObjectMenuItem extends React.Component {
	render() {
		const itemValue = { name: "Test name", label: "Only item to select" };
		return (
			<Wrapper onSelection={(value) => console.log(value.name)}>
				<li>
					<MenuItem value={itemValue} >{itemValue.label}</MenuItem>
				</li>
			</Wrapper>
		);
	}
}

ReactDOM.render(<ObjectMenuItem />, document.body);