import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Package } from '../../api/models/package';
import { PkgdashService } from '../../api/services/pkgdash.service';
import { debounceTime, distinctUntilChanged, fromEvent, merge, Observable, of, tap } from 'rxjs';
import { MatDialogConfig } from '@angular/material/dialog';
import { MatIcon } from '@angular/material/icon';
import { MatPaginator } from '@angular/material/paginator';
import { PackagesService } from '../../services/packages/packages.service';
import { PackagesDataSource } from '../../datasources/packages';
import { MatSort, Sort, SortDirection } from '@angular/material/sort';
import { ActivatedRoute, Router } from '@angular/router';
import { ConfirmService } from 'src/app/services/confirm/confirm.service';
import { AppConstants } from 'src/app/app.constants';
import { MessageService } from 'src/app/services/message/message.service';
import { ErrorRsp, PackagesCreateRsp, PackagesDeleteRsp, PackagesUpdateRsp } from 'src/app/api/models';


@Component({
  selector: 'app-packages',
  templateUrl: './package.component.html',
  styleUrls: ['./package.component.scss'],
  providers: [PkgdashService, MessageService]
})

export class PackageComponent implements OnInit {
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;
  @ViewChild('input') input!: ElementRef;

  selectedPackage?: Package;
  
  dataSource: PackagesDataSource;

  packages$!: Observable<any>;

  public itemsCount = 20;
  sortField = 'name';
  sortOrder: SortDirection = 'asc';

  constructor(
    private router: Router,
    private packageDialog: PackagesService,
    private pkgdashService: PkgdashService,
    private confirmDialog: ConfirmService,
    private messageService: MessageService,
    ) {
      this.dataSource = new PackagesDataSource(this.pkgdashService);
  }


  createPackageDialog(): void {
    this.packageDialog.open({
      height: '400px',
      width: '600px',
      autoFocus: true,
      disableClose: false,
      backdropClass: "package-dialog",
      data: {
        title: 'Create package'
      }
    });

    this.packageDialog.confirmed().subscribe((data: any) => {
      if (data) {
        this.pkgdashService.packagesCreate(data)
        .subscribe({
          next: (rsp: PackagesCreateRsp) => {
            this.loadPackages();
            this.reloadComponent();
            this.messageService.showMessage("package "+rsp.package!.name+" created")
          },
          error: (err: ErrorRsp) => {
            this.messageService.showMessage("package "+data.name+" not created, error "+ err.details)
          }
        });
      }
   });
  }

  updatePackageDialog(pkg: Package): void {
    this.packageDialog.open({
      height: '400px',
      width: '600px',
      autoFocus: true,
      disableClose: false,
      backdropClass: "package-dialog",
      data: {
        service: pkg,
        title: 'Update package '+pkg.name,
      }
    });

    this.packageDialog.confirmed().subscribe((data: any) => {
      if (data) {
        this.pkgdashService.packagesUpdate({
          id: pkg.id!,
          body: data,
        }).subscribe({
          next: (rsp: PackagesUpdateRsp) => {
            this.loadPackages();
            this.reloadComponent();
            this.messageService.showMessage("package "+rsp.package!.name+" updated")
          },
          error: (err: ErrorRsp) => {
            this.messageService.showMessage("package "+data.name+" not updated, error "+ err.details)
          }
        })
      }
   });
  }

  deletePackageDialog(pkg: Package): void {
    this.confirmDialog.open({
      height: '200px',
      width: '300px',
      autoFocus: true,
      disableClose: false,
      backdropClass: "package-dialog",
      data: {
        title: 'Delete package '+pkg.name,
        message: 'Are you sure?',
      }
    });

    this.confirmDialog.confirmed().subscribe((data: any) => {
      if (data) {
        this.pkgdashService.packagesDelete({
          id: pkg.id!,
        }).subscribe({
          next: (rsp: PackagesDeleteRsp) => {
            this.loadPackages();
            this.reloadComponent();
            this.messageService.showMessage("package "+data.name+" deleted")
          },
          error: (err: ErrorRsp) => {
            this.messageService.showMessage("package "+data.name+" not deleted, error "+ err.details)
          }
        })
      }
    })
  }

  selectPackage(pkg: Package): void {
    this.selectedPackage = pkg;
  }

  ngAfterViewInit() {

  }

  public sortPackages(event: Sort): void {
    this.loadPackages()
    this.reloadComponent()
  }

  private reloadComponent(): void {
    let currentUrl = this.router.url;
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
    this.router.onSameUrlNavigation = 'reload';
    this.router.navigate([currentUrl]);
  }

  private loadPackages(): void {
    this.dataSource.list();
  }

  ngOnInit(): void {
    this.dataSource.list('', this.sortField, this.sortOrder, 0, this.itemsCount);
    this.packages$ = this.dataSource.connect();
  }
}