'use strict';

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

const VerticalInputList = require("./layout/vertical-input-list");
const HorizontalInputList = require("./layout/horizontal-input-list");
const PanelHeader = require("./layout/panel-header");

const TextInput = require("./inputs/text");
const Label = require("./inputs/label");

let PropertyInput = createReactClass({
	render: function () {
		return (
			<HorizontalInputList>
				<Label>{this.props.label}</Label>
				<TextInput />
			</HorizontalInputList>
		);
	}
});

let PropertyConnector = createReactClass({
	render: function () {
		let label = <div className="description">{this.props.label}</div>;

		return (
			<div className="connector">
				{this.props.labelDirection === "left" ? label : null}
				<div className="bullet"></div>
				{this.props.labelDirection === "right" ? label : null}
			</div>
		);
	}
});

let Node = createReactClass({
	render: function () {
		return (
			<div className="node">
				<PanelHeader>Example Node</PanelHeader>
				<div className="background"></div>
				<div className="left-connectors">
					<PropertyConnector label="One" labelDirection="left" />
					<PropertyConnector label="Two" labelDirection="left" />
					<PropertyConnector label="Three" labelDirection="left" />
					<PropertyConnector label="Four" labelDirection="left" />
				</div>
				<div className="inputs">
					<VerticalInputList>
						<PropertyInput label="Five:" />
						<PropertyInput label="Six:" />
					</VerticalInputList>
				</div>
				<div className="right-connectors">
					<PropertyConnector label="Seven" labelDirection="right" />
					<PropertyConnector label="Eight" labelDirection="right" />
					<PropertyConnector label="Nine" labelDirection="right" />
				</div>
			</div>
		);
	}
});

module.exports = Node;