import { Component, Inject,AfterViewInit, ViewChild, OnInit } from '@angular/core';
import { ISService } from '../is.service';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort, Sort } from '@angular/material/sort';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { ResourceType, SimpleResource } from '../model/controller.model';
import {FormControl, FormGroup, FormGroupDirective, NgForm, Validators} from '@angular/forms';
import { ResourceLoader } from '@angular/compiler';


@Component({
  selector: 'app-resources',
  templateUrl: './resources.component.html',
  styleUrls: ['./resources.component.css']
})
export class ResourcesComponent implements OnInit {
  typeId:string = '';
  type:ResourceType = { id: '', name: '', contentType: '', count: 0, simple: true };
  resources:SimpleResource[] = [];

  constructor(public service: ISService, public route: ActivatedRoute, public newDialog: MatDialog, public contentDialog: MatDialog, public metadataDialog: MatDialog) {
  }

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.typeId = params['type'];
      this.service.loadResourceType(this.typeId).subscribe({
        next: (data: ResourceType) => this.type = data,
        error: error => console.log(error),
        complete: () => console.log("Completed")
      });
      this.reload()
    });
  }

  reload() {
    if (this.typeId) {
      console.log('reload');
      this.service.loadSimpleResources(this.typeId).subscribe({
        next: (data: SimpleResource[]) => this.resources = data,
        error: error => console.log(error),
        complete: () => console.log("Completed")
      });
    }
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
    //this.historyDatasource.filter = filterValue;
  }

  openNewDialog(): void {
    const dialogRef = this.newDialog.open(ResCreateNewDialog, {
      data: {

      }
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) this.reload();
    });
  }

  openMetadataDialog(r:SimpleResource): void {
    const dialogRef = this.metadataDialog.open(ResMetadataDialog, {
      data: r
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) this.reload();
    });
  }

  openContentDialog(r:SimpleResource): void {
    const dialogRef = this.contentDialog.open(ResContentDialog, {
      data: r
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) this.reload();
    });
  }

  deleteResource(r:SimpleResource) {
    if (confirm('Are you sure?')) {
      this.service.deleteSimpleResource(r).subscribe({
        next: (data: void) => this.reload(),
        error: error => console.log(error),
        complete: () => console.log("Completed")
      });
    }

  }
}


@Component({
  selector: 'res-content-dialog',
  templateUrl: 'content-dialog.html',
  styleUrls: ['resources.component.css']

})
export class ResContentDialog {
  constructor(public dialogRef: MatDialogRef<ResContentDialog>,  @Inject(MAT_DIALOG_DATA) public data: SimpleResource, public service: ISService) {
 
  }
  
  onNoClick(): void {
    this.dialogRef.close();
  }
}

@Component({
  selector: 'res-metadata-dialog',
  templateUrl: 'metadata-dialog.html',
  styleUrls: ['resources.component.css']

})
export class ResMetadataDialog {
  metadataForm = new FormGroup({
    id:  new FormControl('', [Validators.required]),
    type: new FormControl('', [Validators.required]),
    name:  new FormControl('', [Validators.required]),
    description : new FormControl('', [])
  });

  constructor(public dialogRef: MatDialogRef<ResMetadataDialog>,  @Inject(MAT_DIALOG_DATA) public data: SimpleResource, public service: ISService) {
    this.metadataForm.get('id')?.setValue(data.id);
    this.metadataForm.get('type')?.setValue(data.type);
    this.metadataForm.get('name')?.setValue(data.name);
    if (data.description) {
      this.metadataForm.get('description')?.setValue(data.description);
    }
  }

  onSubmit():void {
    const res = Object.assign({}, this.data, this.metadataForm.value);

    this.service.saveSimpleResourceMedatata(res).subscribe({
      next: (data: void) => {
        this.dialogRef.close(1)
      },
      error: error => console.log(error),
      complete: () => console.log("Completed")
    });
  }
  
  onNoClick(): void {
    this.dialogRef.close();
  }
}

@Component({
  selector: 'res-new-dialog',
  templateUrl: 'new-dialog.html',
  styleUrls: ['resources.component.css']

})
export class ResCreateNewDialog {
  constructor(public dialogRef: MatDialogRef<ResCreateNewDialog>,  @Inject(MAT_DIALOG_DATA) public resource: string, public service: ISService) {
 
  }
  
  onNoClick(): void {
    this.dialogRef.close();
  }
}