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[] = [];
  searchText:string = '';

  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) {
      this.service.loadSimpleResources(this.typeId).subscribe({
        next: (data: SimpleResource[]) => this.resources = data,
        error: error => console.log(error),
        complete: () => console.log("Completed")
      });
    }
  }

  openNewDialog(): void {
    const dialogRef = this.newDialog.open(ResCreateNewDialog, {
      data: this.type,
      width: '80%'
    });

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

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

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

  openContentDialog(r:SimpleResource): void {
    this.service.loadSimpleResourceContent(r.id).subscribe({
      next: (data: string) => {

        const dialogRef = this.contentDialog.open(ResContentDialog, {
          data: {
            id: r.id,
            contentType: this.type.contentType,
            content: data
          },
          width: '80%'
        });
    
        dialogRef.afterClosed().subscribe(result => {
          if (result) this.reload();
        });
      },
      error: error => console.log(error),
      complete: () => console.log("Completed")
    });
  }

  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 {
  contentFormControl = new FormControl('', [Validators.required]);
  
  contentForm = new FormGroup({
    content : this.contentFormControl
  });

  constructor(public dialogRef: MatDialogRef<ResContentDialog>,  @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) {
    this.contentFormControl.setValue(data.content);
  }

  onSubmit():void {
    let content = this.contentFormControl.value;
    if (content) {
      this.service.saveSimpleResourceContent(this.data.id, content).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-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: any, 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 {
  newResourceForm = new FormGroup({
    name:  new FormControl('', [Validators.required]),
    description : new FormControl('', []),
    content : new FormControl('', [Validators.required])
  });

  constructor(public dialogRef: MatDialogRef<ResCreateNewDialog>,  @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) {}
  
  onSubmit():void {
    let name:string = this.newResourceForm.get('name')?.value!;
    let type:string = this.data.id!;
    let description:string = this.newResourceForm.get('description')?.value!;
    let content:string = this.newResourceForm.get('content')?.value!;
    
    this.service.addSimpleResource(name, type, description, content).subscribe({
      next: (data: void) => {
        this.dialogRef.close(1)
      },
      error: error => console.log(error),
      complete: () => console.log("Completed")
    });
  }
  onNoClick(): void {
    this.dialogRef.close();
  }
}