.jsx

"use strict";

const React = require("react");

const {
	Pane, PaneSet,
	Ribbon, RibbonBox,
	Grid, Button, ButtonSet, Icon, Text,
	ProgressBar, ProgressButton, StatusIndicator,
	List, ListItem,
	Menu, MenuBar, MenuItem, MenuDivider,
	SetTheme, themes
} = require("ui-lib");

function Canvas() {
	return (
		<div className="canvas">
			<Text>Control tests below:</Text>
			<Button>Hello world!</Button>

			<ButtonSet vertical choice>
				<Button>Option 1</Button>
				<Button default>Option 2</Button>
				<Button>Option 3</Button>
			</ButtonSet>

			<ButtonSet horizontal choice>
				<Button>Option 1</Button>
				<Button default>Option 2</Button>
				<Button>Option 3</Button>
			</ButtonSet>

			<ProgressBar progress={0.205} />

			Canvas
		</div>
	);
}

function MainRibbon(_props) {
	return (
		<Ribbon>
			<RibbonBox label="Connection">
				<Grid columns={[1]} rows={[3, 1]}>
					<Button icon="connect">Connect</Button>
					<Text>[Devices]</Text>
				</Grid>
			</RibbonBox>
			<RibbonBox label="Status">
				<Grid rows={[1, 1, 1]}>
					<StatusIndicator status="positive">Connected</StatusIndicator>
					<StatusIndicator status="neutral">Idle</StatusIndicator>
					<Button type="inline" icon="clear">Clear alarm</Button>
				</Grid>
			</RibbonBox>
			<RibbonBox label="Jog control">
				<Grid columns={["auto", 3, 1, 2]} columnGap={8}>
					<Grid rows={[1, 1]}>
						<Button type="inline" icon="target-angled">Home X/Y</Button>
						<Button type="inline" icon="home-z">Home Z</Button>
					</Grid>
					<Grid columns={[1, 1, 1]} rows={[1, 1 ,1]}>
						<Button x={1} y={0}>▲</Button>
						<Button x={1} y={2}>▼</Button>
						<Button x={0} y={1}>◀</Button>
						<Button x={2} y={1}>▶</Button>
						<Text x={1} y={1} horizontalAlign="center" verticalAlign="center">
							X/Y
						</Text>
					</Grid>
					<Grid rows={[1, 1]}>
						<Button>
							<div>Z</div>
							<div>▲</div>
						</Button>
						<Button>
							<div>▼</div>
							<div>Z</div>
						</Button>
					</Grid>
					<ButtonSet vertical choice onSelect={(id) => console.log("selected", id)}>
						<Button id="1mm">1mm</Button>
						<Button id="10mm" default>10mm</Button>
						<Button id="100mm">100mm</Button>
					</ButtonSet>
				</Grid>
			</RibbonBox>
			<RibbonBox label="Workspace">
				<Grid columns={[1, 1]}>
					<Button icon="add-file">Add file</Button>
					<Grid rows={[1, 1, 1]}>
						<Button type="inlineTiny" icon="new">New</Button>
						<Button type="inlineTiny" icon="save">Save</Button>
						<Button type="inlineTiny" icon="load">Load</Button>
					</Grid>
				</Grid>
			</RibbonBox>
			<RibbonBox label="Create operation">
				<Grid rows={[1, 1, 1]}>
					<Button type="inlineTiny" icon="cut">Cut</Button>
					<Button type="inlineTiny" icon="engrave">Engrave</Button>
					<Button type="inlineTiny" icon="rasterize">Rasterize</Button>
				</Grid>
			</RibbonBox>
			<RibbonBox label="G-code">
				<Grid columns={[1, 1]}>
					<Grid rows={[2, 1]}>
						<ProgressButton vertical icon="cog" type="inline"progress={0.2} buttonSize={3}>
							Generate
						</ProgressButton>
						<Button icon="eye" type="inlineTiny">Display</Button>
					</Grid>
					<Button icon="run">Start job</Button>
				</Grid>
			</RibbonBox>
		</Ribbon>
	);
}

function SomeMenuBar() {
	return (
		<MenuBar>
			<MenuItem label="File" menu={<Menu>
				<MenuItem label="New" />
				<MenuItem label="Recently opened" menu={<Menu>
					<MenuItem label="File 1" />
					<MenuItem label="File 2" />
					<MenuItem label="File 3" />
					<MenuItem label="File 4" />
					<MenuItem label="File 5" />
				</Menu>} />
				<MenuItem label="Open..." />
				<MenuItem label="Save" />
				<MenuItem label="Save as..." />
				<MenuDivider />
				<MenuItem label="Quit" />
			</Menu>} />
			<MenuItem label="Help" menu={<Menu>
				<MenuItem label="About" />
			</Menu>} />
		</MenuBar>
	);
}

function Explorer() {
	return (
		<div className="explorer">
			Explorer
			<List onPick={(path) => console.log("picked", path)} onSelect={(path) => console.log("selected", path)}>
				<ListItem id={1} label="Hello" />
				<ListItem id={2} label="World">
					<ListItem id={1} label="Mars" />
					<ListItem id={2} label="Jupiter" />
				</ListItem>
				<ListItem id={3} label="Earth" />
			</List>
		</div>
	);
}

function PropertyPane() {
	return (
		<div className="propertyPane">
		</div>
	);
}

function TopMenu() {
	return (
		<div className="topMenu">
			<SomeMenuBar />
			<MainRibbon />
		</div>
	);
}

module.exports = function App() {
	return (
		<SetTheme theme={themes.dark}>
			<div className="app">
				<Grid rows={[ "auto", 1 ]}>
					<TopMenu />
					<PaneSet horizontal>
						<Pane resizable initialSize={200} minimumSize={100}>
							<Explorer />
						</Pane>
						<Pane>
							<Canvas />
						</Pane>
						<Pane resizable initialSize={200} minimumSize={100}>
							<PropertyPane />
						</Pane>
					</PaneSet>
				</Grid>
			</div>
		</SetTheme>
	);
};