/// <reference path="../DefinitelyTyped/react/react-global.d.ts" />

// Fixture taken from https://github.com/RyanCavanaugh/koany/blob/master/koany.tsx

interface Garden {
	colors: Gardens.RockColor[];
	shapes: Gardens.RockShape[];
}

namespace Gardens {
	export enum RockShape {
		Empty,
		Circle,
		Triangle,
		Square,
		Max
	}
	export const RockShapes = [RockShape.Circle, RockShape.Triangle, RockShape.Square];
	export const RockShapesAndEmpty = RockShapes.concat(RockShape.Empty);

	export enum RockColor {
		Empty,
		White,
		Red,
		Black,
		Max
	}
	export const RockColors = [RockColor.White, RockColor.Red, RockColor.Black];
	export const RockColorsAndEmpty = RockColors.concat(RockColor.Empty);

	export const Size = 9;

	// 012
	// 345
	// 678
	export const adjacencies = [
		[1, 3], [0, 4, 2], [1, 5],
		[0, 4, 6], [3, 1, 7, 5], [2, 4, 8],
		[3, 7], [6, 4, 8], [7, 5]
	];
}

module Koan {
	export enum DescribeContext {
		// every "white stone" is ...
		Singular,
		// all "white stones" are
		Plural,
		// every stone in the top row is "white"
		Adjectival
	}

	export enum PartType {
		Selector,
		Aspect
	}

	export enum StateTestResult {
		Fail = 0,
		WeakPass = 1,
		Pass = 2
	}

	/// A general format for producing a Statement
	export interface StatementTemplate<T> {
		holes: PartType[];
		describe(args: T): string;
		test(g: Garden, args: T): StateTestResult;
	}

	/// A completed rule that can be used to test a Garden
	export interface ProducedStatement<T> {
		test(g: Garden): StateTestResult;
		description: string;
		children: T;

		hasPassedAndFailed(): boolean;
	}

	function rnd(max: number) {
		return Math.floor(Math.random() * max);
	}

	function randomColor(): Gardens.RockColor {
		return Math.floor(Math.random() * (Gardens.RockColor.Max - 1)) + 1
	}

	function randomShape(): Gardens.RockShape {
		return Math.floor(Math.random() * (Gardens.RockShape.Max - 1)) + 1
	}

	/* New Impl Here */
	interface SelectorSpec<T> {
		childTypes?: PartType[];
		precedence: number;
		weight: number;
		test(args: T, g: Garden, index: number): string|number|boolean;
		describe(args: T, context: DescribeContext): string;
		isAllValues(values: Array<string>|Array<number>): boolean;
	}

	interface ProducedSelector {
		test(g: Garden, index: number): string|number|boolean;
		getDescription(plural: DescribeContext): string;
		seenAllValues(): boolean;
	}

	export function buildSelector<T>(spec: SelectorSpec<T>, args: T): ProducedSelector {
		let seenResults: { [s: string]: boolean;} = {};
		return {
			test: (g: Garden, index: number) => {
				var result = spec.test(args, g, index);
				seenResults[result + ''] = true;
				return result;
			},
			getDescription: (context) => {
				return spec.describe(args, context);
			},
			seenAllValues: () => {
				return spec.isAllValues(Object.keys(seenResults));
			}
		}
	}

	export var SelectorTemplates: Array<SelectorSpec<{}>> = [];
	module LetsMakeSomeSelectors {
		// Is rock
		SelectorTemplates.push({
			test: (args, g, i) => g.colors[i] !== Gardens.RockColor.Empty,
			describe: (args, context) => {
				switch(context) {
					case DescribeContext.Plural:
						return 'Stones';
					case DescribeContext.Adjectival:
						return 'not empty';
					case DescribeContext.Singular:
						return 'Stone';
				}
			},
			isAllValues: items => items.length === 2,
			precedence: 0,
			weight: 1
		});

		// Is of a certain color and/or shape
		Gardens.RockColorsAndEmpty.forEach(color => {
			let colorName = Gardens.RockColor[color];
			let colorWeight = color === Gardens.RockColor.Empty ? 1 : 0.33;
			Gardens.RockShapesAndEmpty.forEach(shape => {
				let shapeName = Gardens.RockShape[shape];
				let shapeWeight = shape === Gardens.RockShape.Empty ? 1 : 0.33;
				SelectorTemplates.push({
					test: (args, g, i) => {
						if(color === Gardens.RockColor.Empty) {
							if (shape === Gardens.RockShape.Empty) {
								return g.colors[i] === Gardens.RockColor.Empty;
							} else {
								return g.shapes[i] === shape;
							}
						} else {
							if (shape === Gardens.RockShape.Empty) {
								return g.colors[i] === color;
							} else {
								return g.shapes[i] === shape && g.colors[i] === color;
							}
						}
					},
					describe: (args, context) => {
						if(color === Gardens.RockColor.Empty) {
							if (shape === Gardens.RockShape.Empty) {
								switch(context) {
									case DescribeContext.Plural:
										return 'Empty Cells';
									case DescribeContext.Adjectival:
										return 'Empty';
									case DescribeContext.Singular:
										return 'Empty Cell';
								}
							} else {
								switch(context) {
									case DescribeContext.Plural:
										return shapeName + 's';
									case DescribeContext.Adjectival:
										return 'a ' + shapeName;
									case DescribeContext.Singular:
										return shapeName;
								}
							}
						} else {
							if (shape === Gardens.RockShape.Empty) {
								switch(context) {
									case DescribeContext.Plural:
										return colorName + ' Stones';
									case DescribeContext.Adjectival:
										return colorName;
									case DescribeContext.Singular:
										return colorName + ' Stone';
								}
							} else {
								switch(context) {
									case DescribeContext.Plural:
										return colorName + ' ' + shapeName + 's';
									case DescribeContext.Adjectival:
										return 'a ' + colorName + ' ' + shapeName;
									case DescribeContext.Singular:
										return colorName + ' ' + shapeName;
								}
							}
						}
					},
					isAllValues: items => items.length === 2,
					precedence: 3,
					weight: (shapeWeight + colorWeight === 2) ? 0.3 : shapeWeight * colorWeight
				});
			});
		});

		// [?] in the [top|middle|bottom] [row|column]
		[0, 1, 2].forEach(rowCol => {
			[true, false].forEach(isRow => {
				var name = (isRow ? ['top', 'middle', 'bottom'] : ['left', 'middle', 'right'])[rowCol] + ' ' + (isRow ? 'row' : 'column');
				var spec: SelectorSpec<[ProducedSelector]> = {
					childTypes: [PartType.Selector],
					test: (args, g, i) => {
						var c = isRow ? Math.floor(i / 3) : i % 3;
						if (c === rowCol) {
							return args[0].test(g, i);
						} else {
							return false;
						}
					},
					describe: (args, plural) => args[0].getDescription(plural) + ' in the ' + name,
					isAllValues: items => items.length === 2,
					precedence: 4,
					weight: 1 / 6
				};
				SelectorTemplates.push(spec);
			});
		});

		// [?] next to a [?]
		SelectorTemplates.push({
			childTypes: [PartType.Selector, PartType.Selector],
			test: (args, g, i) => {
				if (args[0].test(g, i)) {
					return Gardens.adjacencies[i].some(x => !!args[1].test(g, x));
				} else {
					return false;
				}
			},
			describe: (args, plural) => {
				return args[0].getDescription(plural) + ' next to a ' + args[1].getDescription(DescribeContext.Singular);
			},
			isAllValues: items => items.length === 2,
			precedence: 4,
			weight: 1
		} as SelectorSpec<[ProducedSelector, ProducedSelector]>);
	}

	export function buildStatement<T>(s: StatementTemplate<T>, args: T): ProducedStatement<T> {
		let hasPassed = false;
		let hasFailed = false;

		let result: ProducedStatement<T> = {
			children: args,
			description: s.describe(args),
			test: (g) => {
				let r = s.test(g, args);
				if (r === StateTestResult.Pass) {
					hasPassed = true;
				} else if(r === StateTestResult.Fail) {
					hasFailed = true;
				}
				return r;
			},
			hasPassedAndFailed: () => {
				return hasPassed && hasFailed && (args as any as ProducedSelector[]).every(c => c.seenAllValues());
			}
		};
		return result;
	}

	export let StatementList: StatementTemplate<any>[] = [];
	module LetsMakeSomeStatements {
		// Every [?] is a [?]
		StatementList.push({
			holes: [PartType.Selector, PartType.Selector],
			test: (g: Garden, args: [ProducedSelector, ProducedSelector]) => {
				let didAnyTests = false;
				for (var i = 0; i < Gardens.Size; i++) {
					if (args[0].test(g, i)) {
						if(!args[1].test(g, i)) return StateTestResult.Fail;
						didAnyTests = true;
					}
				}
				return didAnyTests ? StateTestResult.Pass : StateTestResult.WeakPass;
			},
			describe: args => {
				return 'Every ' + args[0].getDescription(DescribeContext.Singular) + ' is ' + args[1].getDescription(DescribeContext.Adjectival);
			}
		});

		// There is exactly 1 [?]
		StatementList.push({
			holes: [PartType.Selector],
			test: (g: Garden, args: [ProducedSelector, ProducedSelector]) => {
				var count = 0;
				for (var i = 0; i < Gardens.Size; i++) {
					if (args[0].test(g, i)) count++;
				}

				return count === 1 ? StateTestResult.Pass : StateTestResult.Fail;
			},
			describe: args => {
				return 'There is exactly one ' + args[0].description;
			}
		});

		// There are more [?] than [?]
		StatementList.push({
			holes: [PartType.Selector, PartType.Selector],
			test: (g: Garden, args: [ProducedSelector, ProducedSelector]) => {
				var p1c = 0, p2c = 0;
				for (var i = 0; i < Gardens.Size; i++) {
					if (args[0].test(g, i)) p1c++;
					if (args[1].test(g, i)) p2c++;
				}
				if(p1c > p2c && p2c > 0) {
					return StateTestResult.Pass;
				} else if(p1c > p2c) {
					return StateTestResult.WeakPass;
				} else {
					return StateTestResult.Fail;
				}
			},
			describe: args => {
				return 'There are more ' + args[0].descriptionPlural + ' than ' + args[1].descriptionPlural;
			}
		});
	}

	function randomElementOf<T>(arr: T[]): T {
		if (arr.length === 0) {
			return undefined;
		} else {
			return arr[Math.floor(Math.random() * arr.length)];
		}
	}

	function randomWeightedElementOf<T extends { weight: number }>(arr: T[]): T {
		var totalWeight = arr.reduce((acc, v) => acc + v.weight, 0);
		var rnd = Math.random() * totalWeight;
		for (var i = 0; i < arr.length; i++) {
			rnd -= arr[i].weight;
			if (rnd <= 0) return arr[i];
		}
		// Got destroyed by floating error, just try again
		return randomWeightedElementOf(arr);
	}

	export function buildRandomNewSelector(maxPrecedence = 1000000): ProducedSelector {
		var choices = SelectorTemplates;

		let initial = randomWeightedElementOf(choices.filter(p => p.precedence <= maxPrecedence));
		// Fill in the holes
		if (initial.childTypes) {
			var fills = initial.childTypes.map(h => {
				if (h === PartType.Selector) {
					return buildRandomNewSelector(initial.precedence - 1);
				} else {
					throw new Error('Only know how to fill Selector holes')
				}
			});
			return buildSelector(initial, fills);
		} else {
			return buildSelector(initial, []);
		}
	}

	export function makeEmptyGarden(): Garden {
		var g = {} as Garden;
		g.colors = [];
		g.shapes = [];
		for (var i = 0; i < Gardens.Size; i++) {
			g.colors.push(Gardens.RockColor.Empty);
			g.shapes.push(Gardens.RockShape.Empty);
		}

		return g;
	}

	export function gardenToString(g: Garden): string {
		return g.colors.join('') + g.shapes.join('');
	}

	export function makeRandomGarden(): Garden {
		var g = makeEmptyGarden();
		blitRandomGardenPair(g, g);
		return g;
	}

	export function cloneGarden(g: Garden): Garden {
		var result: Garden = {
			colors: g.colors.slice(0),
			shapes: g.shapes.slice(0)
		};
		return result;
	}

	export function clearGarden(g: Garden) {
		for (var i = 0; i < Gardens.Size; i++) {
			g.colors[i] = Gardens.RockColor.Empty;
			g.shapes[i] = Gardens.RockShape.Empty;
		}
	}

	export function blitRandomGardenPair(g1: Garden, g2: Garden): void {
		let placeCount = 0;
		for (var i = 0; i < Gardens.Size; i++) {
			if (rnd(7) === 0) {
				g1.colors[i] = g2.colors[i] = randomColor();
				g1.shapes[i] = g2.shapes[i] = randomShape();
			} else {
				placeCount++;
				g1.colors[i] = g2.colors[i] = Gardens.RockColor.Empty;
				g1.shapes[i] = g2.shapes[i] = Gardens.RockShape.Empty;
			}
		}
		if (placeCount === 0) blitRandomGardenPair(g1, g2);
	}

	export function blitNumberedGarden(g: Garden, stoneCount: number, n: number): void {
		clearGarden(g);

		let cellNumbers = [0, 1, 2, 3, 4, 5, 6, 7, 8];
		for (let i = 0; i < stoneCount; i++) {
			let cellNum = getValue(cellNumbers.length);
			let cell = cellNumbers.splice(cellNum, 1)[0];
			g.colors[cell] = getValue(3) + 1;
			g.shapes[cell] = getValue(3) + 1;
		}

		function getValue(max: number) {
			let result = n % max;
			n = (n - result) / max;
			return result;
		}
	}

	export function mutateGarden(g: Garden): void {
		while (true) {
			var op = rnd(5);
			let x = rnd(Gardens.Size);
			let y = rnd(Gardens.Size);
			switch (op) {
				case 0: // Swap two non-identical cells
					if (g.colors[x] !== g.colors[y] || g.shapes[x] !== g.shapes[y]) {
						var tmp: any = g.colors[x];
						g.colors[x] = g.colors[y];
						g.colors[y] = tmp;
						tmp = g.shapes[x];
						g.shapes[x] = g.shapes[y];
						g.shapes[y] = tmp;
						return;
					}
					break;
				case 1: // Add a stone
					if (g.colors[x] === Gardens.RockColor.Empty) {
						g.colors[x] = randomColor();
						g.shapes[x] = randomShape();
						return;
					}
					break;
				case 2: // Remove a stone
					if (g.colors.filter(x => x !== Gardens.RockColor.Empty).length === 1) continue;

					if (g.colors[x] !== Gardens.RockColor.Empty) {
						g.colors[x] = Gardens.RockColor.Empty;
						g.shapes[x] = Gardens.RockShape.Empty;
						return;
					}
					break;
				case 3: // Change a color
					let c = randomColor();
					if (g.colors[x] !== Gardens.RockColor.Empty && g.colors[x] !== c) {
						g.colors[x] = c;
						return;
					}
					break;
				case 4: // Change a shape
					let s = randomShape();
					if (g.shapes[x] !== Gardens.RockShape.Empty && g.shapes[x] !== s) {
						g.shapes[x] = s;
						return;
					}
					break;
			}
		}
	}
}

class Indexion {
	sizes: number[];
	constructor(...sizes: number[]) {
		this.sizes = sizes;
	}

	public getValues(index: number): number[] {
		let result = new Array<number>(this.sizes.length);
		this.fillValues(index, result);
		return result;
	}

	public fillValues(index: number, result: number[]): void {
		for (var i = 0; i < this.sizes.length; i++) {
			result[i] = index % this.sizes[i];
			index -= result[i];
			index /= this.sizes[i];
		}
	}

	public valuesToIndex(values: number[]): number {
		var result = 0;
		var factor = 1;
		for (var i = 0; i < this.sizes.length; i++) {
			result += values[i] * this.sizes[i] * factor;
			factor *= this.sizes[i];
		}
		return result;
	}

	public getAdjacentIndices(index: number): number[][] {
		var baseline = this.getValues(index);
		var results: number[][] = [];
		for (var i = 0; i < this.sizes.length; i++) {
			if(baseline[i] > 0) {
				baseline[i]--;
				results.push(baseline.slice());
				baseline[i]++;
			}
			if(baseline[i] < this.sizes[i] - 1) {
				baseline[i]++;
				results.push(baseline.slice());
				baseline[i]--;
			}
		}
		return results;
	}

	public distance(index1: number, index2: number): number {
		let delta = 0;
		for (var i = 0; i < this.sizes.length; i++) {
			var a = index1 % this.sizes[i];
			var b = index2 % this.sizes[i];
			delta += Math.abs(b - a);
			index1 -= a;
			index2 -= b;
			index1 /= this.sizes[i];
			index2 /= this.sizes[i];
		}
		return delta;
	}
}


function makeNewExample() {
	while (true) {
		var p1 = Koan.buildSelector(Koan.SelectorTemplates[12], []);
		var p2 = Koan.buildSelector(Koan.SelectorTemplates[14], []);
		var test = Koan.buildStatement(Koan.StatementList[0], [p1, p2]);

		var examples: Garden[] = [];

		console.log('Attempt to generate examples for "' + test.description + '"');

		var maxGarden = /*(9 * 9) + (9 * 9 * 9 * 8) + */(9 * 9 * 9 * 8 * 9 * 7);
		let g = Koan.makeEmptyGarden();
		let passCount = 0, failCount = 0;
		let resultLookup: boolean[] = [];
		let lastResult: boolean = undefined;
		for (var i = 0; i < maxGarden; i++) {
			Koan.blitNumberedGarden(g, 3, i);
			let result = test.test(g);
			if(result === Koan.StateTestResult.Pass) {
				resultLookup[i] = true;
				passCount++;

				if (lastResult !== true && examples.length < 10) examples.push(Koan.cloneGarden(g));
				lastResult = true;
			} else if (result === Koan.StateTestResult.Fail) {
				resultLookup[i] = false;
				failCount++;

				if (lastResult !== false && examples.length < 10) examples.push(Koan.cloneGarden(g));
				lastResult = false;
			}

			if (examples.length === 10) break;
		}

		console.log('Rule passes ' + passCount + ' and fails ' + failCount);

		/*
		if (!test.hasPassedAndFailed()) {
			console.log('Rule has unreachable, contradictory, or tautological clauses');
			continue;
		}

		if (passCount === 0 || failCount === 0) {
			console.log('Rule is always true or always false');
			continue;
		}
		*/

		var h = document.createElement('h2');
		h.innerText = test.description;
		document.body.appendChild(h);

		return { test: test, examples: examples };
	}
}

let list: Garden[] = [];
let test: Koan.ProducedStatement<any>;
window.onload = function() {
	let rule = makeNewExample();
	let garden = Koan.makeRandomGarden();
	list = rule.examples;
	test = rule.test;

	function renderList() {
		function makeGarden(g: Garden, i: number) {
			return <GardenDisplay
				garden={g}
				key={i + Koan.gardenToString(g)}
				test={test}
				leftButton='✗'
				rightButton='✎'
				onLeftButtonClicked={() => {
					console.log(list.indexOf(g));
					list.splice(list.indexOf(g), 1);
					renderList();
				}}
				onRightButtonClicked={() => {
					garden = g;
					renderEditor();
				}}
			/>;
		}
		let gardenList = <div>{list.map(makeGarden)}</div>;
		React.render(gardenList, document.getElementById('results'));
	}

	let i = 0;
	function renderEditor() {
		i++;
		let editor = <GardenEditor key={i} test={rule.test} garden={garden} onSaveClicked={(garden) => {
			list.push(garden);
			renderList();
		}} />;
		React.render(editor, document.getElementById('editor'));
	}

	renderList();
	renderEditor();
}

function classNames(nameMap: any): string {
	return Object.keys(nameMap).filter(k => nameMap[k]).join(' ');
}

interface GardenCellProps extends React.Props<{}> {
	color: Gardens.RockColor;
	shape: Gardens.RockShape;
	index: number;

	movable?: boolean;
	onEdit?(newColor: Gardens.RockColor, newShape: Gardens.RockShape): void;
}
interface GardenCellState {
	isDragging?: boolean;
}
class GardenCell extends React.Component<GardenCellProps, GardenCellState> {
	state: GardenCellState = {};
	ignoreNextEdit = false;

	render() {
		var classes = ['cell', 'index_' + this.props.index];

		if (this.state.isDragging) {
			// Render as blank
		} else {
			classes.push(Gardens.RockColor[this.props.color], Gardens.RockShape[this.props.shape]);
		}

		if (this.props.movable) classes.push('movable');
		let events: React.HTMLAttributes = {
			onDragStart: (e) => {
				this.ignoreNextEdit = false;
				e.dataTransfer.dropEffect = 'copyMove';
				e.dataTransfer.effectAllowed = 'move';
				e.dataTransfer.setData('shape', this.props.shape.toString());
				e.dataTransfer.setData('color', this.props.color.toString());

				let drag = document.getElementById(getGardenName(this.props.color, this.props.shape));
				let xfer: any = (e.nativeEvent as DragEvent).dataTransfer;
				xfer.setDragImage(drag, drag.clientWidth * 0.5, drag.clientHeight * 0.5);

				this.setState({ isDragging: true });
			},
			onDragEnter: (e) => {
				e.dataTransfer.dropEffect = 'move';
				e.preventDefault();
			},
			onDragOver: (e) => {
				e.dataTransfer.dropEffect = 'move';
				e.preventDefault();
			},
			onDragEnd: (e) => {
				this.setState({ isDragging: false });
				if (!this.ignoreNextEdit) {
					this.props.onEdit && this.props.onEdit(undefined, undefined);
				}
			},
			draggable: true
		}

		let handleDrop = (event: React.DragEvent) => {
			if(this.props.onEdit) {
				if (this.state.isDragging) {
					// Dragged to self, don't do anything
					this.ignoreNextEdit = true;
				} else {
					let shape: Gardens.RockShape = +event.dataTransfer.getData('shape');
					let color: Gardens.RockColor = +event.dataTransfer.getData('color');
					this.props.onEdit(color, shape);
				}
			}
		}

		return <span className={classes.join(' ')} onDrop={handleDrop} {...this.props.movable ? events : {}} />;
	}
}

interface GardenDisplayProps extends React.Props<GardenDisplay> {
	garden?: Garden;
	test?: Koan.ProducedStatement<any>;

	leftButton?: string;
	rightButton?: string;
	onLeftButtonClicked?(): void;
	onRightButtonClicked?(): void;

	editable?: boolean;
	onChanged?(newGarden: Garden): void;
}
interface GardenDisplayState {
	garden?: Garden;
}
class GardenDisplay extends React.Component<GardenDisplayProps, GardenDisplayState> {
	state = {
		garden: Koan.cloneGarden(this.props.garden)
	};

	leftClicked = () => {
		this.props.onLeftButtonClicked && this.props.onLeftButtonClicked();
	};

	rightClicked = () => {
		this.props.onRightButtonClicked && this.props.onRightButtonClicked();
	};

	render() {
		let g = this.state.garden;
		let pass = (this.props.test && this.props.test.test(this.state.garden));

		let classes = {
			garden: true,
			unknown: pass === undefined,
			pass: pass === Koan.StateTestResult.Pass || pass === Koan.StateTestResult.WeakPass,
			fail: pass === Koan.StateTestResult.Fail,
			editable: this.props.editable
		};

		var children = g.colors.map((_, i) => (
			<GardenCell
				key={i}
				color={g.colors[i]}
				shape={g.shapes[i]}
				index={i}
				movable={this.props.editable}
				onEdit={(newColor, newShape) => {
					if(this.props.editable) {
						let newGarden = Koan.cloneGarden(this.state.garden);
						newGarden.colors[i] = newColor;
						newGarden.shapes[i] = newShape;
						this.setState({ garden: newGarden });
						this.props.onChanged && this.props.onChanged(newGarden);
					}
				}}
			/>));

		return <div className="gardenDisplay">
			<div className={classNames(classes)}>{children}</div>
			<span className="infoRow">
				{this.props.leftButton && <div className="button left" onClick={this.leftClicked}>{this.props.leftButton}</div>}
				<div className={"passfail " + (pass ? 'pass' : 'fail')}>{pass ? '✓' : '🚫'}</div>
				{this.props.rightButton && <div className="button right" onClick={this.rightClicked}>{this.props.rightButton}</div>}
			</span>
		</div>;
	}
}

interface GardenEditorProps extends React.Props<GardenEditor> {
	onSaveClicked?(garden: Garden): void;
	test?: Koan.ProducedStatement<any>;
	garden?: Garden;
}
interface GardenEditorState {
	garden?: Garden;
	pass?: boolean;
}
class GardenEditor extends React.Component<GardenEditorProps, {}> {
	state = { garden: this.props.garden };

	save = () => {
		this.props.onSaveClicked && this.props.onSaveClicked(this.state.garden);
	};

	render() {
		return <div className="editor">
			<GardenDisplay garden={this.state.garden} test={this.props.test} editable onChanged={g => this.setState({ garden: g }) } />
			<StonePalette />
			<div className="button save" onClick={this.save}>{'💾'}</div>
		</div>;
	}
}

class StonePalette extends React.Component<{}, {}> {
	render() {
		let items: JSX.Element[] = [];
		Gardens.RockColors.forEach(color => {
			Gardens.RockShapes.forEach(shape => {
				let name = getGardenName(color, shape);
				let extraProps = { id: name, key: name };
				let index = items.length;
				items.push(<GardenCell
					color={color}
					shape={shape}
					index={index}
					movable
					{...extraProps} />)
			});
		});
		return <div className="palette">{items}</div>;
	}
}

function getGardenName(color: Gardens.RockColor, shape: Gardens.RockShape) {
	return 'draggable.' + Gardens.RockShape[shape] + '.' + Gardens.RockColor[color];
}