export class NgLayer {
	/**
	 * open a dialog window
	 * @return {NgLayerRef}
	 */
	public dialog(config:LayerConfig):NgLayerRef
	
	/**
	 * open a alert window
	 *
	 * @return {NgLayerRef}
	 */
	public alert(config:LayerConfig):NgLayerRef
	
	/**
	 * open a confirm window
	 *
	 * @return {NgLayerRef}
	 */
	public confirm(config:LayerConfig):NgLayerRef
	
	/**
	 * open a message layer
	 *
	 * @return {NgLayerRef}
	 */
	public tip(config:LayerConfig):NgLayerRef
	
	/**
	 * open a loading layer
	 *
	 * @return {NgLayerRef}
	 */
	public loading(config:LayerConfig):NgLayerRef
}

export class NgLayerRef {
	/**
	 * destory the layer.
	 */
	close()
	
	/**
	 * show close button or not
	 */
	showCloseBtn(show:boolean):NgLayerRef
	
	/**
	 * update dialog title. for dialog only
	 *
	 * @return {NgLayerRef}
	 */
	setTitle(title:string):NgLayerRef
	
	/**
	 * update message of layer
	 *
	 * e.g.
	 *
	 * ```typescript
	 * let tip = this.ly.tip("保存成功", 1000, "top", "warn");
	 * setTimeout(()=>{
	 * 	lyRef.setMessage("successfully saved").setTipType("success");
	 * 	lyRef.close();
	 * }, 2000);
	 *
	 * ```
	 * @return {NgLayerRef}
	 */
	setMessage(message:string):NgLayerRef
	
	/**
	 * if the callBack return ture, the layer will be closed
	 *
	 * e.g.
	 *
	 * ```typescript
	 * let lyRef = this.ly.confirm("are you sure?", "yes", "no");
	 * lyRef.setOnClose(()=>{
	 * 	if(...) return true;
	 * });
	 * ```
	 * @return {NgLayerRef}
	 */
	setOnClose(callBack:()=>boolean):NgLayerRef
	
	/**
	 * update "ok" button text, for alert layer or confirm layer
	 *
	 * e.g.
	 *
	 * ```typescript
	 *let lyRef = this.ly.confirm("are you sure?", "yes", "no");
	 *lyRef.setOkText("sure");
	 * ```
	 * @return {NgLayerRef}
	 */
	setOkText(ok:string):NgLayerRef
	
	/**
	 * update "cancel" button text, for confirm layer only
	 *
	 * e.g.
	 *
	 * ```typescript
	 *let lyRef = this.ly.confirm("are you sure?", "yes", "no");
	 *lyRef.setCancelText("not sure");
	 * ```
	 * @return {NgLayerRef}
	 */
	setCancelText(cancel:string):NgLayerRef
	
	
	/**
	 * okCallback called on 'ok' button click. for alert layer or confirm layer
	 *
	 * e.g.
	 *
	 * ```typescript
	 *let lyRef = this.ly.confirm("are you sure?", "yes", "no");
	 *lyRef.ok(()=>{
	 * 	...do something...
	 * });
	 * ```
	 * @return {NgLayerRef}
	 */
	ok(okCallback:()=>boolean):NgLayerRef
	
	/**
	 * cancelCallback called on "cancel" button click. for confirm layer only
	 *
	 * e.g.
	 *
	 * ```typescript
	 *let lyRef = this.ly.confirm("are you sure?", "yes", "no");
	 *lyRef.ok(()=>{
	 * 	...do something...
	 * });
	 * ```
	 *
	 * @return {NgLayerRef}
	 */
	cancel(cancelCallback:()=>boolean):NgLayerRef
}

export class LayerConfig {
	/**
	 * the new component will be a child of parent, if parent is null,
	 * new component will be a root component of application.
	 * valid only for dialog leyer
	 */
	parent?:any;
	
	/**
	 * if you want to use some custom directive in your dynamic component,
	 * don't forget to import
	 */
	imports?:Array<any>;
	
	/**
	 * datas pass to dialog component
	 */
	data?:any;
	
	/**
	 * dialog title
	 * valid only for dialog leyer
	 */
	title?:string;
	
	/**
	 * show close button or not.
	 * valid only for dialog leyer
	 */
	closeAble?:boolean;
	
	/**
	 * message type of tip layer.
	 * valid for alert, confirm, tip, loading leyer
	 */
	message?:string;
	
	/**
	 * text of "ok" button.
	 * valid for alert or confirm leyer
	 */
	okText?:string;
	
	/**
	 * text of "cancel" button
	 * valid only for confirm leyer
	 */
	cancelText?:string;
	
	/**
	 * position of the layer("top", "center", "bottom"), default to "top"
	 * valid only for loading or tip leyer
	 */
	align?:string;
	
	/**
	 * modal window or not
	 * valid only for loading leyer
	 */
	isModal?:boolean;
	
	/**
	 * layer will be automatic closed after duration(ms)
	 * valid only for tip leyer
	 */
	tipDuration?:number;
	
	/**
	 * defined a popup animation by a class selector
	 * valid for all type leyer.
	 *
	 * existing options:
	 * rollIn, fallDown, fadeInDown, runIn, bounceIn,
	 * splatIn, dropDown, vanishIn, spaceIn, jelly, fadeInUp,
	 */
	inSelector?:string;
	
	/**
	 * defined a closeing animation by a class selector
	 * valid for all type leyer.
	 *
	 * existing options:
	 * rollOut, fadeOutDown, bounceOut, vanishOut, spaceOut,
	 * boingOut, fadeOutDown
	 */
	outSelector?:string;
}

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {NgLayer, NgLayerRef, NgLayerComponent} from "../../ng2-layer.js";

@Component({
	selector: '.app',
	templateUrl: 'temp/app.html',
	providers: [NgLayer]
})
export class AppComponent {
	constructor(private ly:NgLayer) {}
	
	config:any = {
		inSelector:"fallDown",
		outSelector:"rollOut",
		title:"angular2 layer",
		align:"top",
		parent: this,
		dialogComponent:DialogComponent,
		closeAble: false
	}
	
	dialog(){
		this.ly.dialog(this.config);
	}
	
	alert(){
		this.ly.alert(this.config);
	}
	
	confirm(){
		this.ly.confirm(this.config);
	}
	
	loading(){
		let tip = this.ly.loading(this.config);
		
		setTimeout(()=>{tip.close();}, 2000)
	}
	
	tip(){
		this.ly.tip(this.config);
	}
}

/*component for dialog*/
@Component({
	selector: '.dialog',
	templateUrl: 'temp/dialog.html'
})
export class DialogComponent {
	data = "angular2 layer";
	
	constructor(private ly:NgLayerRef, private l:NgLayer) {}
	
	setTitle(){this.ly.setTitle("Angular2 Layer Title");}
	
	close(){this.ly.close();}
	
	showCloseBtn(){this.ly.showCloseBtn(true)};
	
	showData(){alert(this.data)};
}

@NgModule({
	imports: [BrowserModule],
	entryComponents:[NgLayerComponent, DialogComponent],
	declarations: [AppComponent, NgLayerComponent, DialogComponent],
	bootstrap: [AppComponent]
})
class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);