import { Component, ContentChild, EventEmitter, Input, Output, TemplateRef, ViewChild } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';

import { LabelingService, ProgressTracker } from 'first-npm-package-nicule/core';
import { HypermediaForm } from 'first-npm-package-nicule/forms';
import { TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'hm-form-dialog',
    templateUrl: './form-dialog.component.html',
    styleUrls: ['./form-dialog.component.scss']
})
export class FormDialogComponent {
    @Input() interpolate: any;
    @Input() showActionButtons = true;
    @Input() wrapperCssClass = '';
    @ContentChild(HypermediaForm, { static: false }) hmForm: HypermediaForm;
    @ViewChild('dialogTemplateRef', { static: false }) dialogTemplateRef: TemplateRef<any>;

    @Output() isOpen = new EventEmitter();
    dialogRef: MatDialogRef<any, any>;

    constructor(public progressTracker: ProgressTracker,
        public dialog: MatDialog,
        private label: LabelingService,
        private translate: TranslateService) { }

    get title(): string {
        if (!this.hmForm || !this.hmForm.action) {
            return;
        }

        const untranslated = this.label.form('title', this.hmForm.action.name);
        const instant = this.translate.instant(untranslated, this.interpolate);

        return instant !== 'title' && instant || undefined;
    }

    get description(): string {
        if (!this.hmForm || !this.hmForm.action) {
            return;
        }

        const untranslated = this.label.form('description', this.hmForm.action.name);
        const instant = this.translate.instant(untranslated, this.interpolate);

        return instant !== 'description' && instant || undefined;
    }

    get additionalDescription(): string {
        if (!this.hmForm || !this.hmForm.action) {
            return;
        }

        const untranslated = this.label.form('additional_description', this.hmForm.action.name);
        const instant = this.translate.instant(untranslated, this.interpolate);

        return instant !== 'additional_description' && instant || undefined;
    }

    get confirm(): string {
        if (!this.hmForm || !this.hmForm.action) {
            return;
        }

        const untranslated = this.label.form('confirm', this.hmForm.action.name);
        const instant = this.translate.instant(untranslated, this.interpolate);

        return instant !== 'confirm' && instant || undefined;
    }

    get cancel(): string {
        if (!this.hmForm || !this.hmForm.action) {
            return;
        }

        const untranslated = this.label.form('cancel', this.hmForm.action.name);
        const instant = this.translate.instant(untranslated, this.interpolate);

        return instant !== 'cancel' && instant || undefined;
    }

    open(value?: any, resetForm = true): void {
        this.isOpen.emit(true);

        this.hmForm.setValue(value);

        this.dialogRef = this.dialog.open(this.dialogTemplateRef, { width: '600px' });
        this.dialogRef
            .afterClosed()
            .subscribe(() => {
                this.hmForm.reset();
                this.isOpen.emit(false);
            });

        this.hmForm
            .actionSuccess
            .subscribe(() => {
                this.close();
            });

        setTimeout(_ => {
            const mainBtn: any = document.querySelector('mat-dialog-container button.mat-raised-button');
            if (mainBtn) {
                mainBtn.focus();
                this.hmForm.reset(resetForm);
            }
        }, 500);
    }

    close(): void {
        this.dialogRef.close(true);
    }
}