// @flow
import * as React from 'react';
import {
	Container,
	Row,
	Col,
	TabContent, TabPane,
	Alert,
	Badge,
	Modal, ModalBody, ModalHeader, ModalFooter,
	Table,
} from 'reactstrap';

type Props = {
	// func to close modal
	toggle: () => any,
	// is the modal active?
	active: boolean,
};

class GraphicalEditorHelpModal extends React.PureComponent<Props> {
	constructor(props: Props){
		super(props);
	}

	render = () => {
		return (
			<Modal
				size='lg'
				isOpen={this.props.active}
				toggle={this.props.toggle}
				fade={true}
				onOpened={e => {
					/*
					const f = document.querySelector('#tcModalInitFocus');
					if(f && f.focus)
						f.focus();
						*/
				}}
			>
				<ModalHeader toggle={this.props.toggle}>
					Graphical Editor
				</ModalHeader>
				<ModalBody>
					<h3>How do I...</h3>
					<h5>Add a block?</h5>
					<p>
						Right-clicking anywhere on the background grid will open a menu for adding (or pasting) blocks to the grid point where the puck (the black dot that follows your mouse) is.
					</p>
					<h5>Change the information of a block?</h5>
					<p>
						Left-clicking on a block will bring up the Block Editor modal, which lets you change the block name, add &amp; remove &amp; rename inputs and outputs, change the synchronized channel, and delete the block. Remember to click <i>Save Changes</i>! If you want to discard your changes, you can either click outside of the modal or click the <b>x</b> button on the top-right corner.
					</p>
					<h5>Create a connection?</h5>
					<p>
						Connections are between an output of a block and an input of a block. To create a connection, click on the black rectangle to the right of the desired output, and drag onto the black rectangle next to the desired input.
					</p>
					<h5>Delete a block or connection?</h5>
					<p>
						Besides being able to delete a block in the Block Editor, you can right-click blocks or connections to show a menu where you may delete the corresponding element.
					</p>
					<h5>Temporarily hide connections?</h5>
					<p>
						The editor only displays connections connected to selected blocks. For example, to only see connections to/from Block X, select Block X (via shift+clicking on the block).
					</p>
					<h5>Insert blocks from another toolchain, an algorithm, or a database?</h5>
					<p>
						Right-click on the background grid and select <i>Insert Object Here</i> to insert blocks for an object relative to the position of your mouse. A modal will pop up, and lets you insert a toolchain, algorithm, or part of a database, to easily create toolchains using BEAT objects that you already have created.
					</p>
					<h3>Keyboard Shortcuts</h3>
					<Table striped>
						<thead>
							<tr>
								<th>Action</th>
								<th>Shortcut</th>
								<th>Additional Info</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>
									Pan
								</td>
								<td><pre className='preInline'>
									Middle-click and move
								</pre></td>
								<td>
									The preferred way to pan around the editor is to use a mouse with middle-click functionality. You can middle-click anywhere in the canvas and then move your mouse to pan around on both axis. If this does not work for you, you may need to turn on <i>autoscrolling</i> in your browser settings.
								</td>
							</tr>
							<tr>
								<td>
									Pan vertically
								</td>
								<td><pre className='preInline'>
									Scroll up/down
								</pre></td>
								<td>
									You can also manually drag the scroll bar on the right edge of the editor.
								</td>
							</tr>
							<tr>
								<td>
									Pan horizontally
								</td>
								<td>
									<pre className='preInline'>Scroll left/right</pre>
									{' '}
									<span>
										or
									</span>
									{' '}
									<pre className='preInline'>Left arrow key &amp; Right arrow key</pre>
								</td>
								<td>
									You can also manually drag the scroll bar on the bottom edge of the editor. To scroll left or right, three-button mice will usually let you click &amp; hold on the middle button to scroll freely.
								</td>
							</tr>
							<tr>
								<td>
									Zoom in/out
								</td>
								<td><pre className='preInline'>
									Shift + scroll up/down
								</pre></td>
								<td>
									You can also use the {`"Zoom in"`} and {`"Zoom out"`} buttons in the top-right menu.
								</td>
							</tr>
							<tr>
								<td>
									Edit a block
								</td>
								<td><pre className='preInline'>
									Left click
								</pre></td>
								<td>
									Left-clicking a block will open a modal where you can edit the block name, the synchronized channel, inputs, and outputs.
								</td>
							</tr>
							<tr>
								<td>
									Move blocks
								</td>
								<td><pre className='preInline'>
									Left click + drag
								</pre></td>
								<td>
									You may move a block at a time by clicking &amp; dragging on a block. You may move a selection or group of blocks by dragging the grey rectangle representing the selection or group.
								</td>
							</tr>
							<tr>
								<td>
									Open a context (right-click) menu
								</td>
								<td><pre className='preInline'>
									Right click
								</pre></td>
								<td>
									There are context menus for: blocks, connections, area selections, groups, and the background.
								</td>
							</tr>
							<tr>
								<td>
									Select Multiple Blocks
								</td>
								<td>
									<pre className='preInline'>
										Shift + left click
									</pre>
									{' '}
									<span>
										or
									</span>
									{' '}
									<pre className='preInline'>
										Click + drag
									</pre>
								</td>
								<td>
									Shift + left-clicking a block will toggle selection. Clicking on the background grid will clear the selection.
								</td>
							</tr>
							<tr>
								<td>
									Create a Connection between an output and an input
								</td>
								<td>
									<pre className='preInline'>
										Left click + drag
									</pre>
									{' '}
									<span>
										on the black rectangle next to the desired output, and release the drag on the black rectangle next to the desired input.
									</span>
								</td>
								<td>
									You can also create a connection by clicking on the black rectangle of an output and then clicking on the black rectangle of an input. This lets you create connections between distant blocks and move around the canvas.
								</td>
							</tr>
							<tr>
								<td>
									Create an Algorithm based on a block
								</td>
								<td>
									<pre className='preInline'>
										Left click
									</pre>
									{' '}
									<span>
										on the block to bring up the block editor. At the top of the modal, enter the username and name for the algorithm to be created, and click the <i>Create</i> button to generate an algorithm based off of the connections, inputs, and outputs of the block. You will have to edit the algorithm in the editor to choose the types, and to add any any parameters or results.
									</span>
								</td>
								<td>
									This only works for normal and analyzer blocks. If you do not see your new algorithm, refresh the browser tab/window.
								</td>
							</tr>
							<tr>
								<td>
									See more information
								</td>
								<td>
									<pre className='preInline'>
										Hover
									</pre>
								</td>
								<td>
									Blocks and connections in the editor have extra information found by hovering over the element for a couple seconds.
								</td>
							</tr>
						</tbody>
					</Table>
				</ModalBody>
			</Modal>
		);
	}
}

export default GraphicalEditorHelpModal;
