import { DatePipe, NgIf, DecimalPipe } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit, ViewChild } from '@angular/core';
import { UntypedFormGroup, UntypedFormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatSort, MatSortable, MatSortModule } from '@angular/material/sort';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { ActivatedRoute } from '@angular/router';
import { AuthService } from 'src/app/auth/auth.service';
import { Layer } from 'src/app/models/layer.model';
import { Record } from 'src/app/models/record.model';
import { NotificationsService } from 'src/app/services/notifications.service';
import { environment } from 'src/environments/environment';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatCardModule } from '@angular/material/card';

@Component({
    selector: 'app-layer-detail',
    templateUrl: './layer-detail.component.html',
    styleUrls: ['./layer-detail.component.scss'],
    standalone: true,
    imports: [FormsModule, ReactiveFormsModule, MatCardModule, MatToolbarModule, MatButtonModule, MatGridListModule, MatFormFieldModule, MatInputModule, NgIf, MatTableModule, MatSortModule, DecimalPipe]
})
export class LayerDetailComponent implements OnInit {

  public form!: UntypedFormGroup;
  public document!: Layer;

  displayedColumns = environment.views.layers.recordColumns.split("|");
  dataSource!: MatTableDataSource<Record>;

  @ViewChild(MatSort) sort!: MatSort;

  constructor(
    private fb$: UntypedFormBuilder,
    private http$: HttpClient,
    private route$: ActivatedRoute,
    private auth$: AuthService,
    private datePipe: DatePipe,
    private notifications$: NotificationsService
  ) { }

  async ngOnInit() {
    this.form = Layer.getForm(this.fb$);
    this.document = await this.load();
    this.dataSource = new MatTableDataSource<Record>(this.document.records);
    this.dataSource.sort = this.sort;
    this.document.fillForm(this.form);
    this.form.disable();
    this.document.created = `${this.datePipe.transform(this.document.createdAt?.toDate(), 'short')}, ${this.document.createdBy?.userName}`;
    this.dataSource.sort.sort({ id: 'code', start: 'desc' } as MatSortable);
  }
  private async load(): Promise<Layer> {
      return await Layer.getById(this.route$.snapshot.paramMap.get('id') || "", this.http$);
  }
  trackByUid(index : number, item : Record) {
    return item.id;
  }
  async export() {
    if (await Layer.exportToGoogleSheet(this.document.id || "", this.http$)) {
      this.notifications$.add({
        text: "The file was saved on Google Drive",
      });
    } else {
      this.notifications$.add({
        text: "Save failed!",
      });
    }
  }
}