import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
import HostRecord from '../../../structures/HostRecord';
import {ApiService} from '../../../service/api.service';
import {Observable} from 'rxjs';
import {AlertController, ModalController} from '@ionic/angular';
import {ColumnsComponent} from './columns/columns.component';
import {AgGridAngular} from 'ag-grid-angular';

@Component({
  selector: 'editor-database',
  templateUrl: './database.component.html',
  styleUrls: ['./database.component.scss'],
})
export class DatabaseComponent implements OnInit {
  @Input() hostRecord: HostRecord;
  @Output() hostRecordChange = new EventEmitter<HostRecord>();
  @Output() requestParentSave = new EventEmitter<DatabaseComponent>();
  @Output() requestParentDelete = new EventEmitter<DatabaseComponent>();
  @ViewChild('agGridElement', {static: false}) agGridElement: AgGridAngular;

  public dbRecord: any;
  public pendingSetup = true;
  public dirty = false;
  public lastClickRow = -1;

  constructor(
      protected api: ApiService,
      protected modals: ModalController,
      protected alerts: AlertController,
  ) { }

  title = 'app';
  columnDefs = [];
  rowData = [];

  ngOnInit() {
    this.getInitObservable().subscribe(() => {
      this.getColumnLoadObservable().subscribe(() => {
        this.getDataLoadObservable().subscribe(() => {

        });
      });
    });
  }

  onCellValueChanged() {
    this.dirty = true;
  }

  async onManageColumns() {
    const modal = await this.modals.create({
      component: ColumnsComponent,
      componentProps: {columnSets: this.columnDefs},
    });

    modal.onDidDismiss().then(result => {
      if ( result.data ) {
        this.columnDefs = result.data.map(x => {
          x.editable = true;
          if ( x.Type === 'text' ) {
            x.editor = 'agTextCellEditor';
          } else if ( x.Type === 'number' ) {
            x.valueFormatter = (value) => {
              const num = parseFloat(value.value);
              if ( !isNaN(num) ) {
                return num;
              } else {
                return '';
              }
            };
          } else if ( x.Type === 'textarea' ) {
            x.editor = 'agPopupTextCellEditor';
          }
          return x;
        });
        const endpoint = `/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}/columns`
        this.api.post(endpoint, {columns: this.columnDefs}).subscribe(res => {
          this.columnDefs = res.data;
        });
      }
    });

    await modal.present();
  }

  onInsertRow() {
    this.rowData.push({});
    this.agGridElement.api.setRowData(this.rowData);
  }

  async onRemoveRow() {
    const alert = await this.alerts.create({
      header: 'Are you sure?',
      message: `You are about to delete row ${this.lastClickRow + 1}. This cannot be undone.`,
      buttons: [
        {
          text: 'Keep It',
          role: 'cancel',
        },
        {
          text: 'Delete It',
          handler: () => {
            const newRows = this.rowData.filter((x, i) => {
              return i !== this.lastClickRow;
            });

            this.rowData = newRows;
            this.agGridElement.api.setRowData(this.rowData);
            this.lastClickRow = -1;
          },
        }
      ],
    });

    await alert.present();
  }

  async onDropDatabase() {
    const alert = await this.alerts.create({
      header: 'Are you sure?',
      message: `You are about to delete this database and all its entries. This action cannot be undone.`,
      buttons: [
        {
          text: 'Keep It',
          role: 'cancel',
        },
        {
          text: 'Delete It',
          handler: async () => {
            this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/drop/${this.hostRecord.Value.Value}`).subscribe();
            this.requestParentDelete.emit(this);
          },
        },
      ],
    });

    await alert.present();
  }

  onRowClicked($event) {
    this.lastClickRow = $event.rowIndex;
  }

  getDataLoadObservable(): Observable<any> {
    return new Observable<any>(sub => {
      this.api.get(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}/data`).subscribe(res => {
        this.rowData = res.data.map(x => x.RowData);
        this.agGridElement.api.setRowData(this.rowData);
        sub.next();
        sub.complete();
      });
    });
  }

  onSyncRecords() {
    this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}/data`, this.rowData)
        .subscribe(res => {
      this.rowData = res.data.map(x => x.RowData);
      this.agGridElement.api.setRowData(this.rowData);
      this.dirty = false;
    });
  }

  getColumnLoadObservable(): Observable<any> {
    return new Observable<any>(sub => {
      this.api.get(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}/columns`).subscribe(res => {
        this.columnDefs = res.data.map(x => {
          x.editable = true;
          if ( x.Type === 'text' ) {
            x.editor = 'agTextCellEditor';
          } else if ( x.Type === 'number' ) {
            x.valueFormatter = (value) => {
              const num = parseFloat(value.value);
              if ( !isNaN(num) ) {
                return num;
              } else {
                return '';
              }
            };
          } else if ( x.Type === 'textarea' ) {
            x.editor = 'agPopupTextCellEditor';
          }
          return x;
        });
        sub.next();
        sub.complete();
      });
    });
  }

  getInitObservable(): Observable<any> {
    return new Observable<any>(sub => {
      if ( this.hostRecord && this.pendingSetup ) {
        if ( !this.hostRecord.Value.Value ) {
          this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/create`).subscribe(res => {
            this.dbRecord = res.data;
            this.hostRecord.Value.Mode = 'database';
            this.hostRecord.Value.Value = res.data.UUID;
            this.hostRecord.value = res.data.UUID;
            this.hostRecordChange.emit(this.hostRecord);
            this.pendingSetup = false;
            sub.next(true);
            sub.complete();
          });
        } else {
          this.api.get(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}`).subscribe(res => {
            this.dbRecord = res.data;
            this.pendingSetup = false;
            sub.next(true);
            sub.complete();
          });
        }
      } else {
        this.pendingSetup = true;
      }
    });
  }

}