import * as React from "react";
import { storiesOf, addDecorator } from "@storybook/react";
import { setOptions } from "@storybook/addon-options";
import { host } from "storybook-host";
import { Helper } from "./.helpers/Helper";
import { Toolkit } from "../src/Toolkit";

//include the SCSS for the demo
import "./.helpers/demo.scss";

Toolkit.TESTING = true;

addDecorator(
	host({
		cropMarks: false,
		height: "100%",
		width: "100%",
		padding: 20
	})
);

setOptions({
	name: "STORM React Diagrams",
	url: "https://github.com/projectstorm/react-diagrams",
	addonPanelInRight: true
});

storiesOf("Simple Usage", module)
	.add(
		"Simple example",
		Helper.makeDemo(
			require("./demo-simple/index").default(),
			require("!!raw-loader!./demo-simple/index"),
			require("./demo-simple/docs.md")
		)
	)
// 	.add(
// 		"Simple flow example",
// 		Helper.makeDemo(require("./demo-simple-flow/index").default(), require("!!raw-loader!./demo-simple-flow/index"))
// 	)
// 	.add(
// 		"Performance demo",
// 		Helper.makeDemo(require("./demo-performance/index").default(), require("!!raw-loader!./demo-performance/index"))
// 	)
// 	.add(
// 		"Locked widget",
// 		Helper.makeDemo(require("./demo-locks/index").default(), require("!!raw-loader!./demo-locks/index"))
// 	)
// 	.add(
// 		"Canvas grid size",
// 		Helper.makeDemo(require("./demo-grid/index").default(), require("!!raw-loader!./demo-grid/index"))
// 	)
// 	.add(
// 		"Limiting link points",
// 		Helper.makeDemo(
// 			require("./demo-limit-points/index").default(),
// 			require("!!raw-loader!./demo-limit-points/index")
// 		)
// 	)
// 	.add(
// 		"Events and listeners",
// 		Helper.makeDemo(require("./demo-listeners/index").default(), require("!!raw-loader!./demo-listeners/index"))
// 	)
// 	.add(
// 		"Zoom to fit",
// 		Helper.makeDemo(require("./demo-zoom-to-fit/index").default(), require("!!raw-loader!./demo-zoom-to-fit/index"))
// 	)
// 	.add(
// 		"Links with labels",
// 		Helper.makeDemo(
// 			require("./demo-labelled-links/index").default(),
// 			require("!!raw-loader!./demo-labelled-links/index")
// 		)
// 	);
//
// storiesOf("Advanced Techniques", module)
// 	.add(
// 		"Clone Selected",
// 		Helper.makeDemo(require("./demo-cloning/index").default(), require("!!raw-loader!./demo-cloning/index"))
// 	)
// 	.add(
// 		"Serializing and de-serializing",
// 		Helper.makeDemo(require("./demo-serializing/index").default(), require("!!raw-loader!./demo-serializing/index"))
// 	)
// 	.add(
// 		"Programatically modifying graph",
// 		Helper.makeDemo(
// 			require("./demo-mutate-graph/index").default(),
// 			require("!!raw-loader!./demo-mutate-graph/index")
// 		)
// 	)
// 	.add(
// 		"Large application",
// 		Helper.makeDemo(
// 			require("./demo-drag-and-drop/index").default(),
// 			require("!!raw-loader!./demo-drag-and-drop/components/BodyWidget")
// 		)
// 	)
// 	.add(
// 		"Smart routing",
// 		Helper.makeDemo(
// 			require("./demo-smart-routing/index").default(),
// 			require("!!raw-loader!./demo-smart-routing/index")
// 		)
// 	);
//
// storiesOf("Custom Models", module)
// 	.add(
// 		"Custom diamond node",
// 		Helper.makeDemo(
// 			require("./demo-custom-node1/index").default(),
// 			require("!!raw-loader!./demo-custom-node1/index")
// 		)
// 	)
// 	.add(
// 		"Custom animated links",
// 		Helper.makeDemo(
// 			require("./demo-custom-link1/index").default(),
// 			require("!!raw-loader!./demo-custom-link1/index")
// 		)
// 	);
//
// storiesOf("3rd party libraries", module).add(
// 	"Auto Distribute (Dagre)",
// 	Helper.makeDemo(require("./demo-dagre/index").default(), require("!!raw-loader!./demo-dagre/index"))
// );

// enable this to log mouse location when writing new puppeteer tests
//Helper.logMousePosition()