import { Http } from '@angular/http';
import { ActivatedRoute } from '@angular/router';
import { TdDialogService } from '@covalent/core';
import { ToastsManager } from 'ng2-toastr/ng2-toastr';

import { LocaleService } from '../common/i18n';
import { BasicService } from '../common/utils';
import { SeCurisResourceServices } from '../resources/base';

import { AfterViewInit, Component, Input } from '@angular/core';


export interface IComboOption {
	id: number,
	label: string
}


export class FormBase extends BasicService {
	protected form_title: string = '';
	protected form_subtitle: string = '';
	protected data: any = {};
	protected isNew : boolean = true;

	constructor($L: LocaleService, 
	            protected route: ActivatedRoute,
				protected toaster: ToastsManager,
				protected resourceServices: SeCurisResourceServices, 
				protected resourceName: string,
				protected dialogs : TdDialogService ) {
		super($L);
	}

	public getFieldName(fieldId: string) : string {
		return this.$L.get(`field.${fieldId}`);
	}

  	protected loadCombos(): void {}

	save() {
		var command = this.isNew ? this.resourceServices.create(this.data) : this.resourceServices.modify(this.data.id, this.data);
		command.subscribe(
			data => this.toaster.success(this.$L.get('{} saved sucessfully', this.resourceName.capitalize())),
			err => this.toaster.error(err.message, this.$L.get('Error saving {}', this.resourceName))
		);
	}

	delete(eleId: number | string) : void {
		this.dialogs.openConfirm({
			message: this.$L.get('The {} with ID {} will be deleted. Do you want to continue ?', this.resourceName, eleId),
			disableClose: false, // defaults to false
			title: this.$L.get('Delete {}', this.resourceName),
			cancelButton: this.$L.get('Cancel'), 
			acceptButton: this.$L.get('Yes, delete')
		}).afterClosed().subscribe((accept: boolean) => {
			if (accept) {
				 this.resourceServices.remove(eleId)
				 	.subscribe(
						responseData => this.toaster.success(this.$L.get('{} was sucessfully deleted', this.resourceName.capitalize())),
						err => this.toaster.success(err.message, this.$L.get('Error deleting the {}', this.resourceName))
				);
			}
		});
	}

	protected prepareInitialData(idparam: string, default_values: any = {}) : void {
		this.form_title = this.$L.get('{} data', this.resourceName.capitalize());
		this.isNew = true;
		!!this.route && this.route.params.subscribe(params => {
			var eleId = +params[idparam]; // (+) converts string 'id' to a number
			if (!eleId) {
				this.data = {};
				Object.keys(default_values).forEach((k : string) => this.data[k] = default_values[k]);
				this.form_subtitle = this.$L.get('Create a new {}', this.resourceName) ;
			} else {
				this.isNew = false;
				this.resourceServices.get(eleId).subscribe(eleData => this.data = eleData);
				this.form_subtitle = this.$L.get('Modify the {} data', this.resourceName) ;
			}
		});
	}

}

@Component({
  selector: 'error-checker',
  template: `
    <div *ngIf="formField?.touched && formField.invalid" layout="column">
      <span class="error-msg" *ngFor="let err of getFieldErrors()" align="end">{{err}}</span>
    </div>`,
	styles: [
		':host {margin-top: -10px;}',
		`.error-msg {
			color: darkred;
			font-size: 0.8em;
		}`
	]
})
export class ErrorCheckerComponent {

  @Input() formField: any;
  @Input() fieldName: string;

  constructor(private $L: LocaleService) {
  }
  
  getFieldErrors() : string[] {
    if (this.formField.valid) {
      return []
    } else {
      return (<string[]>Object.keys(this.formField.errors)).map((err:string) => this.getErrorMsg(err));
    }
  }

  private updateFieldErrors() {
  }

  private getErrorMsg(err: string) : string{
    switch(err) { 
      case 'required': { 
        return this.fieldName + ' '+ this.$L.get('is required');
      } 
      case 'number': { 
        return this.fieldName + ' '+ this.$L.get('should be a number');
      } 
      default: { 
        return this.fieldName + ' '+ this.$L.get('unknown error') + ' ' + err;
      } 
    } 
  }

  log(obj: any) {
    console.log(obj)
  }
  
}


@Component({
  selector: 'field-readonly',
  template: `
  <div layout="column" class="mat-input-container readonly" >
		<div class="mat-input-wrapper">
			<div class="mat-input-table">
				<div class="mat-input-prefix"></div>
				<div class="mat-input-infix">
					<div class="label-value mat-input-element">{{value}}</div>
					<span class="mat-input-placeholder-wrapper" >
						<label class="mat-input-placeholder mat-float">
							<span class="placeholder">{{label}}</span>
						</label>
					</span>
				</div>
				<div class="mat-input-suffix"></div>
			</div>
			<div class="mat-input-underline"></div>
		</div>
	</div>`,
	styles: [`.readonly .mat-input-element {
				margin-top: 0px !important;
				color: rgba(0, 0, 0, 0.50);
			}`,
			`.readonly .mat-input-element {
				margin-top: 0px;
				color: rgba(0, 0, 0, 0.50);
			}`,
			`.readonly.mat-input-container {
				width: 100%;
			}`]
})
export class FieldReadonlyComponent {
	@Input('value') value: any;

	private _label : string;
    @Input('label')
	set label(txt: string) {
		this._label = this.$L.get(txt);
	}
	get label(): string { return this._label; }

	constructor(private $L : LocaleService) {

	}
}

interface MetadataPair {
	key: string,
	value: string,
	readonly: boolean,
	mandatory: boolean
}

@Component({
  selector: 'metadata-manager',
  template: `
  <div layout="column" layout-fill flex>
		<div layout="row" layout-align="start center">
			<span class="md-title">{{title}}</span>
			<span flex></span>
			<button *ngIf="addOrDelete" type="button"  md-icon-button color="primary" (click)="newMetadata()"><md-icon>add</md-icon></button>
		</div>
		<div layout="row" layout-align="start center" *ngFor="let pair of metadata" class="values">
			<md-input-container flex="35" >
				<input mdInput type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="pair.key" [readonly]="!editKeys" [mdTooltip]="pair.key" />
				<md-placeholder>
					<span i18n="field.key"></span>
				</md-placeholder>
			</md-input-container>
			<md-input-container flex >
				<input mdInput type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="pair.value" [readonly]="pair.readonly" [required]="pair.mandatory"
				 [mdTooltip]="pair.value" />
				<md-placeholder>
					<span i18n="field.value"></span>
				</md-placeholder>
			</md-input-container>
			<md-checkbox *ngIf="addOrDelete" [ngModelOptions]="{standalone: true}" [(ngModel)]="pair.mandatory" name="mandatory" [mdTooltip]="$L.get('field.mandatory')">
			</md-checkbox>
			<button *ngIf="addOrDelete" type="button" md-icon-button color="warn" (click)="deleteMetadata(pair)"><md-icon>delete</md-icon></button>
		</div>
	</div>`,
	styles: [
		':host { width:100%; }',
		`.values > * {
			margin-left: 5px;
			margin-right: 5px;
		}`
	]
})
export class MetadataManagerComponent {
	@Input('metadata') metadata: MetadataPair[];
	@Input('addOrDelete') addOrDelete: boolean = false;
	@Input('editKeys') editKeys: boolean = false;
	@Input('title') title: string;

	constructor(private $L : LocaleService) {
		this.title = $L.get('License metadata');
	}

	newMetadata() : void{
		this.metadata.push(<MetadataPair>{
			mandatory: false,
			readonly: false
		});
	}

	deleteMetadata(pair: MetadataPair) : void {
		let indexToRemove = this.metadata.findIndex(ele => ele.key === pair.key);
		if (indexToRemove !== -1) {
			this.metadata.splice(indexToRemove, 1);
		}
	}
}