import * as Diagramming from '@mindfusion/diagramming';
import * as Controls from '@mindfusion/controls';
import * as DControls from '@mindfusion/diagramming-controls';
import * as Drawing from '@mindfusion/drawing';

import ui_css from '@mindfusion/common-ui/themes/common-ui.css';
import ui_business from '@mindfusion/common-ui/themes/business.css';
export { ui_css, ui_business };

namespace ControlsSample {
	const GlassEffect = Diagramming.GlassEffect;
	const Style = Diagramming.Style;
	const shapeNodeStyle = new Style();

	let diagram: Diagramming.Diagram = null;

	// create a DiagramView component that wraps the "diagram" canvas
	let diagramView = Diagramming.DiagramView.create(<HTMLCanvasElement>document.getElementById("diagram"));
	diagram = diagramView.diagram;

	//styling
	shapeNodeStyle.brush = { type: 'SolidBrush', color: '#e0e9e9' };
	shapeNodeStyle.stroke = "#7F7F7F";
	shapeNodeStyle.fontName = "Verdana";
	shapeNodeStyle.fontSize = 4;
	shapeNodeStyle.nodeEffects = [new GlassEffect()];
	diagram.style = shapeNodeStyle;

	// create a Palette component
	let palette = DControls.Palette.create(<HTMLDivElement>document.getElementById("palette"));
	palette.padding = 2;
	palette.captionFont = new Drawing.Font("sans-serif", 3);
	palette.setTop("200px");
	palette.setWidth("200px");
	palette.setHeight("");
	palette.theme = "business";
	initPalette(palette);

	// create an Overview component that wraps the "overview" canvas
	let overview = Diagramming.Overview.create(<HTMLCanvasElement>document.getElementById("overview"));
	overview.diagramView = diagramView;
	overview.backColor = "#eee";

	// create an ZoomControl component that wraps the "zoomer" canvas
	let zoomer = Controls.ZoomControl.create(<HTMLCanvasElement>document.getElementById("zoomer"));
	zoomer.target = diagramView;
	zoomer.borderColor = "#5a79a5";

	// create an Ruler component that wraps the "ruler" div
	let ruler = Diagramming.Ruler.create(<HTMLDivElement>document.getElementById("ruler"));
	ruler.diagramView = diagramView;
	ruler.backColor = "#fff";
	ruler.foreColor = "#5a79a5";
	ruler.textColor = "#5a79a5";

	function initPalette(palette: DControls.Palette) {
		palette.addCategory("Flowchart Shapes");
		var shapes = ["Start", "Input", "Process", "Decision"]
		for (var i = 0; i < shapes.length; ++i) {
			var node = new Diagramming.ShapeNode();
			node.shape = shapes[i];
			node.style = shapeNodeStyle;
			palette.addItem(node, "Flowchart Shapes", shapes[i]);
		}

		palette.addCategory("Data Shapes");
		var shapes = ["Database", "Input", "Delay", "Document", "ManualOperation"];
		for (var i = 0; i < shapes.length; ++i) {
			var node = new Diagramming.ShapeNode();
			node.shape = shapes[i];
			node.style = shapeNodeStyle;
			palette.addItem(node, "Data Shapes", shapes[i]);
		}

		palette.addCategory("BPMN Shapes");
		var shapes = ["BpmnStartLink", "BpmnIntermediateLink", "BpmnEndLink",
			"BpmnStartMessage", "BpmnIntermediateMessage", "BpmnEndMessage"];
		for (var i = 0; i < shapes.length; ++i) {
			var node = new Diagramming.ShapeNode();
			node.shape = shapes[i];
			node.style = shapeNodeStyle;
			palette.addItem(node, "BPMN Shapes", shapes[i]);
		}
	}
}