import {Component, ElementRef, EventEmitter, Inject, Input, OnInit, Output, ViewChild} from '@angular/core';
import HostRecord from '../../../structures/HostRecord';
import {ApiService} from '../../../service/api.service';
import {AlertController} from '@ionic/angular';
import {Observable} from 'rxjs';
import { APP_BASE_HREF } from '@angular/common';
import {EditorService} from '../../../service/editor.service';
import {EditorNodeContract} from '../../nodes/EditorNode.contract';

@Component({
  selector: 'editor-files',
  templateUrl: './files.component.html',
  styleUrls: ['./files.component.scss'],
})
export class FilesComponent extends EditorNodeContract implements OnInit {
  @Input() nodeId: string;
  @ViewChild('uploadForm') uploadForm: ElementRef;
  // @Input() readonly = false;
  // @Input() hostRecord: HostRecord;
  // @Output() hostRecordChange = new EventEmitter<HostRecord>();
  // @Output() requestParentSave = new EventEmitter<FilesComponent>();
  // @Output() requestParentDelete = new EventEmitter<FilesComponent>();

  public fileRecords: Array<any> = [];
  public pendingSetup = true;
  public dbRecord: any = {};
  public dirty = false;

  public get readonly() {
    return !this.node || !this.editorService.canEdit();
  }

  constructor(
      protected api: ApiService,
      protected alerts: AlertController,
      public readonly editorService: EditorService,
      @Inject(APP_BASE_HREF) private baseHref: string
  ) { super(); }

  public isDirty(): boolean | Promise<boolean> {
    return this.dirty;
  }

  public writeChangesToNode(): void | Promise<void> {
    this.node.Value.Mode = 'files';
  }

  public needsLoad(): boolean | Promise<boolean> {
    return this.node && this.pendingSetup;
  }

  public async performLoad(): Promise<void> {
    if ( !this.node.Value ) {
      this.node.Value = {};
    }

    if ( !this.node.Value.Value && !this.readonly ) {
      await new Promise((res, rej) => {
        this.api.post(`/files/${this.page.UUID}/${this.node.UUID}/create`).subscribe({
          next: result => {
            this.dbRecord = result.data;
            this.fileRecords = result.data.files;
            this.node.Value.Mode = 'files';
            this.node.Value.Value = result.data.UUID;
            this.node.value = result.data.UUID;
            this.dirty = true;
            res();
          },
          error: rej,
        });
      });
    } else {
      await new Promise((res, rej) => {
        this.api.get(`/files/${this.page.UUID}/${this.node.UUID}/get/${this.node.Value.Value}`).subscribe({
          next: result => {
            this.dbRecord = result.data;
            this.fileRecords = result.data.files;
            res();
          },
          error: rej,
        });
      });
    }

    this.pendingSetup = false;
  }

  public async performDelete(): Promise<void> {
    await new Promise((res, rej) => {
      this.api.post(`/files/${this.page.UUID}/${this.node.UUID}/delete/${this.node.Value.Value}`).subscribe({
        next: result => {
          res();
        },
        error: rej,
      });
    });
  }

  ngOnInit() {
    this.editorService.registerNodeEditor(this.nodeId, this).then(() => {

    });
  }

  getApiSubmit() {
    return this.api._build_url(`file/upload/${this.page.UUID}/${this.node.UUID}/${this.node.Value.Value}`);
  }

  onSubmitClick() {
    if ( this.readonly ) {
      return;
    }

    this.uploadForm.nativeElement.submit();
  }

  getReturnUrl() {
    return `${this.baseHref}editor;id=${this.page.UUID}`;
  }

  downloadFile(fileRecord) {
    // tslint:disable-next-line:max-line-length
    window.open(this.api._build_url(`files/${this.page.UUID}/${this.node.UUID}/get/${this.node.Value.Value}/${fileRecord._id}`), '_blank');
  }
}