import { Component, OnInit, ViewChild, Inject } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Sort } from '@angular/material/sort';
import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { DatePipe } from '@angular/common';
import { PageEvent } from '@angular/material/paginator';

import { QuotaService } from '../../services/quota.service';
import { JitsiService } from '../../services/jitsi.service';
import { UrlShortenerService } from '../../services/urlshortener.service';
import { ConfirmDialog } from '../../ui/confirm/confirm.component';
import { I18nService } from './../../services/i18n.service';

@Component({
  selector: 'app-account-jitsi',
  templateUrl: './jitsi.component.html',
  styleUrls: [ './jitsi.component.scss' ]
})
export class JitsiComponent implements OnInit {

  form: FormGroup;
  @ViewChild('formDirective') private formDirective: NgForm;
  jitsiRoomsQuota: number = 0;
  jitsiRooms: any;
  jitsiRoom: any = {};
  success: boolean;
  working: boolean;
  shortenedUrlQuota: number = 0;
  datetimeformat: String;
  page: any = { page: 0, size: 10, sort: "id", desc: false };
  pageSizeOptions: number[] = [ 5, 10, 25, 50 ];

  jitsiRoomsColumns = [ "share", "room", "starts", "moderationStarts", "expires", "moderationUrl", "edit", "delete" ];

  constructor(
    private quotaService: QuotaService,
    private formBuilder: FormBuilder,
    private jitsiService: JitsiService,
    private snackBar: MatSnackBar,
    private i18n: I18nService,
    public dialog: MatDialog) { }

  ngOnInit(): void {
    this.datetimeformat = this.i18n.get('format.datetime', []);

    this.form = this.formBuilder.group({
      room: [ '', Validators.required ],
      starts: [ '', Validators.nullValidator ],
      moderationStarts: [ '', Validators.nullValidator ],
      expires: [ '', Validators.nullValidator ],
    });

    this.refresh();
  }

  create(): void {
    this.working = true;
    if (!this.jitsiRoom.starts) {
      this.jitsiRoom.moderationStarts = null;
    }

    this.jitsiService.create(this.jitsiRoom).subscribe(response => {
      this.refresh();
      this.formDirective.resetForm();
      this.jitsiRoom = {};
      this.working = false;
    }, (error) => {
      this.working = false;
      if (error.status == 409) {
        let errors = {};
        for (let code of error.error) {
          errors[ code.field ] = errors[ code.field ] || {};
          errors[ code.field ][ code.code ] = true;
        }

        for (let code in errors) {
          this.form.get(code).setErrors(errors[ code ]);
        }
      }
    })
  }

  refresh() {
    this.jitsiRoomsQuota = 0;
    this.shortenedUrlQuota = 0;
    this.quotaService.quotas().subscribe((data: any) => {
      for (let quota of data) {
        if (quota.name == "jitsi") {
          this.jitsiRoomsQuota = quota.value;
        } else if (quota.name == "url_shortener") {
          this.shortenedUrlQuota = quota.value;
        }
      }
    })

    this.jitsiService.get(this.page.page, this.page.size, this.page.sort, this.page.desc).subscribe((data: any) => {
      this.jitsiRooms = data;
    })
  }

  updatePages(event: PageEvent) {
    this.page.page = event.pageIndex;
    this.page.size = event.pageSize;
    this.jitsiService.get(this.page.page, this.page.size, this.page.sort, this.page.desc).subscribe((data: any) => {
      this.jitsiRooms = data;
    }, (error) => { })
  }

  updateSort(sort: Sort) {
    if (sort.direction == "") {
      this.page.sort = "id";
      this.page.desc = false;
    } else {
      this.page.sort = sort.active;
      this.page.desc = sort.direction == "desc";
    }
    this.jitsiService.get(this.page.page, this.page.size, this.page.sort, this.page.desc).subscribe((data: any) => {
      this.jitsiRooms = data;
    }, (error) => { })
  }

  confirmDelete(jitsiRoom) {
    const dialogRef = this.dialog.open(ConfirmDialog, {
      data: {
        'label': 'jitsi.rooms.confirmDelete',
        'args': [ jitsiRoom.room ]
      }
    })

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        this.jitsiService.delete(jitsiRoom.id).subscribe((result: any) => {
          this.refresh();
        })
      }
    });
  }

  share(jitsiRoom) {
    const dialogRef = this.dialog.open(JitsiShareDialog, {
      data: jitsiRoom,
      minWidth: '300px',
    });
  }

  open(jitsiRoom: any, moderation: boolean) {
    return (moderation && jitsiRoom.moderationStarts != null || !jitsiRoom.starts || Date.parse(jitsiRoom.starts) < new Date().getTime()) && (!moderation || jitsiRoom.moderationStarts == null || Date.parse(jitsiRoom.moderationStarts) < new Date().getTime());
  }

  createShortenedUrl(jitsiRoom: any) {
    this.jitsiService.createShortUrl(jitsiRoom.id).subscribe((result: any) => {
      this.refresh();
    }, (error: any) => {
      this.snackBar.open(this.i18n.get("urlshortener.noQuota", []), this.i18n.get("close", []));
    });
  }

  copyRoomUrlToClipboard(jitsiRoom: any) {
    const selBox = document.createElement('textarea');
    selBox.value = jitsiRoom.url;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
    this.snackBar.open(this.i18n.get("jitsi.rooms.clipboard.copied", []), this.i18n.get("close", []), {
      duration: 3000
    });
  }

  clearModeration(jitsiRoom) {
    if (!jitsiRoom.starts) {
      jitsiRoom.moderationStarts = null;
    }
  }

  edit(jitsiRoom) {
    const dialogRef = this.dialog.open(JitsiEditDialog, {
      data: jitsiRoom,
      minWidth: '400px',
    });

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


@Component({
  selector: 'app-jitsi-edit-dialog',
  templateUrl: 'jitsi.edit.html',
  styleUrls: [ './jitsi.edit.scss' ]
})
export class JitsiEditDialog {

  form: FormGroup;
  jitsiRoom: any;
  datetimeformat: string;

  constructor(
    private i18n: I18nService,
    private jitsiService: JitsiService,
    public dialogRef: MatDialogRef<JitsiEditDialog>,
    private formBuilder: FormBuilder,
    @Inject(MAT_DIALOG_DATA) public data: any) {
    this.jitsiRoom = JSON.parse(JSON.stringify(data));
  }

  ngOnInit(): void {
    this.datetimeformat = this.i18n.get('format.datetime', []);
    this.form = this.formBuilder.group({
      room: [ '', Validators.required ],
      starts: [ '', Validators.nullValidator ],
      moderationStarts: [ '', Validators.nullValidator ],
      expires: [ '', Validators.nullValidator ],
    });
  }

  clearModeration(jitsiRoom) {
    if (!jitsiRoom.starts) {
      jitsiRoom.moderationStarts = null;
    }
  }

  save() {
    this.jitsiService.update(this.jitsiRoom).subscribe((result: any) => {
      this.dialogRef.close(result);
    }, (error) => {
      if (error.status == 409) {
        let errors = {};
        for (let code of error.error) {
          errors[ code.field ] = errors[ code.field ] || {};
          errors[ code.field ][ code.code ] = true;
        }

        for (let code in errors) {
          this.form.get(code).setErrors(errors[ code ]);
        }
      }
    });
  }

}

@Component({
  selector: 'app-jitsi-share-dialog',
  templateUrl: 'jitsi.share.html',
  styleUrls: [ './jitsi.share.scss' ]
})
export class JitsiShareDialog {

  jitsiRoom: any;
  datetimeformat: string;

  constructor(
    private i18n: I18nService,
    private snackBar: MatSnackBar,
    private datePipe: DatePipe,
    public dialogRef: MatDialogRef<JitsiShareDialog>,
    @Inject(MAT_DIALOG_DATA) public data: any) {
    this.jitsiRoom = data;
  }

  ngOnInit(): void {
    this.datetimeformat = this.i18n.get('format.datetime', []);
    this.jitsiRoom.shareText = this.i18n.get('jitsi.share.text.intro', []);
    if (this.jitsiRoom.starts && !this.jitsiRoom.expires) {
      this.jitsiRoom.shareText += "\n\n" + this.i18n.get('jitsi.share.text.starts', [ this.datePipe.transform(new Date(this.jitsiRoom.starts), this.datetimeformat) ]);
    } else if (!this.jitsiRoom.starts && this.jitsiRoom.expires) {
      this.jitsiRoom.shareText += "\n\n" + this.i18n.get('jitsi.share.text.expires', [ this.datePipe.transform(new Date(this.jitsiRoom.expires), this.datetimeformat) ]);
    } else if (this.jitsiRoom.starts && this.jitsiRoom.expires) {
      this.jitsiRoom.shareText += "\n\n" + this.i18n.get('jitsi.share.text.both', [ this.datePipe.transform(new Date(this.jitsiRoom.starts), this.datetimeformat), this.datePipe.transform(new Date(this.jitsiRoom.expires), this.datetimeformat) ]);
    }
    this.jitsiRoom.shareText += "\n\n" + this.i18n.get('jitsi.share.text.outro', [ this.jitsiRoom.url ]);
  }

  copyToClipboard(text) {
    const selBox = document.createElement('textarea');
    selBox.value = text;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
    this.snackBar.open(this.i18n.get("jitsi.share.clipboard.copied", []), this.i18n.get("close", []), {
      duration: 3000
    });
  }

}