'use strict';

const React = require("react");
const createReactClass = require("create-react-class");
const classnames = require("classnames");

const HorizontalInputList = require("./layout/horizontal-input-list");
const ControlBar = require("./layout/control-bar");

const Label = require("./inputs/label");
const HorizontalButtonSet = require("./inputs/horizontal-button-set");
const Button = require("./inputs/button");

let MenuItem = createReactClass({
	render: function () {
		return (
			<div className={classnames("item", this.props.className)}>
				<i className={classnames("icon", this.props.icon)}></i>
				{this.props.name}
			</div>
		);
	}
});

let Folder = createReactClass({
	render: function () {
		return <MenuItem className="folder" icon="icon-folder" {...this.props}/>
	}
});

let ObjectType = createReactClass({
	render: function () {
		return <MenuItem className="object-type" icon="icon-globe" {...this.props}/>
	}
});

let Menu = createReactClass({
	render: function () {
		return (
			<div className="menu">
				<ControlBar>
					<HorizontalInputList>
						<Label>Create new:</Label>
						<HorizontalButtonSet>
							<Button>Asset</Button>
							<Button>Object</Button>
							<Button>Timeline</Button>
							<Button>Scene</Button>
						</HorizontalButtonSet>
					</HorizontalInputList>
				</ControlBar>
				<div className="item-browser">
					{this.props.items.map((item) => {
						if (item.type === "folder") {
							return <Folder name={item.name} />;
						} else if (item.type === "object-type") {
							return <ObjectType name={item.name} />;
						}
					})}
				</div>
			</div>
		)
	}
});

module.exports = Menu;