import { Component, ChangeDetectionStrategy, EventEmitter, Output, Input, ChangeDetectorRef } from '@angular/core';
import { RELATIONS_HISTORY_MANAGER } from '@anglr/dynamic/relations-editor';
import { RelationsDebugger } from '@anglr/dynamic/relations';
import { RelationsNodeManager } from '@anglr/dynamic/relations-editor';
import { isPresent, nameof } from '@jscrpt/common';
import { MetadataHistoryManagerDebug } from '../../services';
import { StepNameSAPipe } from '../../pipes';
import { RelationsCanvasDebugSAComponent } from '../relationsCanvasDebug/relationsCanvasDebug.component';
import * as i0 from "@angular/core";
import * as i1 from "@anglr/dynamic/relations";
/**
 * Component used for visualization of relations debugger data
 */
export class RelationsDebuggerVisualizerSAComponent {
    //######################### constructor #########################
    constructor(relationsDebugger, changeDetector) {
        this.relationsDebugger = relationsDebugger;
        this.changeDetector = changeDetector;
        //######################### protected properties - template bindings #########################
        /**
         * Playing through debugging steps
         */
        this.playing = false;
        /**
         * Definition of nodes that should be rendered
         */
        this.nodeDefinitions = [];
        //######################### public properties - inputs #########################
        /**
         * Delay between steps during automatic play
         */
        this.playDelay = 1500;
        /**
         * Definition of relations and their nodes, used for rendering canvas
         */
        this.relationsDefinition = [];
        //######################### public properties - outputs #########################
        /**
         * Occurs when user is trying to close visualizer
         */
        this.close = new EventEmitter();
    }
    //######################### public methods - implementation of OnInit #########################
    /**
     * Initialize component
     */
    ngOnInit() {
        const step = this.relationsDebugger.getCurrentStep();
        this.renderStep(step);
    }
    //######################### public methods - implementation of OnChanges #########################
    /**
     * Called when input value changes
     */
    ngOnChanges(changes) {
        if (nameof('relationsDefinition') in changes) {
            this.renderStep(this.currentStep);
        }
    }
    //######################### protected methods - template bindings #########################
    /**
     * Toggles play mode
     */
    togglePlay() {
        this.playing = !this.playing;
        if (isPresent(this.interval)) {
            clearInterval(this.interval);
            this.interval = null;
        }
        else {
            this.interval = setInterval(() => {
                const step = this.relationsDebugger.getNextStep();
                if (!step) {
                    this.togglePlay();
                    return;
                }
                this.processStep(step);
                console.log(step, this.relationsDebugger);
            }, this.playDelay);
        }
    }
    /**
     * Shows next step
     */
    nextStep() {
        const step = this.relationsDebugger.getNextStep();
        this.renderStep(step);
    }
    /**
     * Shows previous step
     */
    previousStep() {
        const step = this.relationsDebugger.getPreviousStep();
        this.renderStep(step);
    }
    /**
     * Shows last step
     */
    lastStep() {
        const step = this.relationsDebugger.getLastStep();
        this.renderStep(step);
    }
    /**
     * Shows first step
     */
    firstStep() {
        const step = this.relationsDebugger.getFirstStep();
        this.renderStep(step);
    }
    //######################### protected methods #########################
    /**
     * Updates current node definition for step
     */
    updateNodeDefinitionForStep() {
        this.nodeDefinitions = this.relationsDefinition
            .map(itm => {
            return Object.assign(Object.assign({}, itm), { package: 'relations-debugger' });
        });
    }
    /**
     * Renders current step
     * @param step - Step to be rendered
     */
    renderStep(step) {
        if (!step) {
            return;
        }
        this.processStep(step);
    }
    /**
     * Process step
     * @param step - Step to be processed
     */
    processStep(step) {
        this.updateNodeDefinitionForStep();
        this.currentStep = step;
        this.changeDetector.detectChanges();
    }
}
RelationsDebuggerVisualizerSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: RelationsDebuggerVisualizerSAComponent, deps: [{ token: i1.RelationsDebugger }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
RelationsDebuggerVisualizerSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: RelationsDebuggerVisualizerSAComponent, isStandalone: true, selector: "relations-debugger-visualizer", inputs: { playDelay: "playDelay", relationsDefinition: "relationsDefinition" }, outputs: { close: "close" }, providers: [
        RelationsNodeManager,
        {
            provide: RELATIONS_HISTORY_MANAGER,
            useClass: MetadataHistoryManagerDebug,
        },
    ], usesOnChanges: true, ngImport: i0, template: "<div class=\"dynamic-flex-row dynamic-margin-bottom-small\">\n    <div class=\"dynamic-flex-row\">\n        <div class=\"dynamic-margin-right-small\">{{currentStep?.timestamp}}</div>\n        <div class=\"dynamic-margin-right-small\">{{currentStep | stepName}}</div>\n    </div>\n\n    <div class=\"dynamic-flex-row dynamic-flex-1 dynamic-justify-content-center\">\n        <div>\n            <a class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"firstStep()\">\n                <span class=\"fas fa-backward-fast\"></span>\n            </a>\n\n            <a class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"previousStep()\">\n                <span class=\"fas fa-backward-step\"></span>\n            </a>\n\n            <a class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"togglePlay()\">\n                <span class=\"fas\" [class.fa-play]=\"!playing\" [class.fa-pause]=\"playing\"></span>\n            </a>\n\n            <a class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"nextStep()\">\n                <span class=\"fas fa-forward-step\"></span>\n            </a>\n\n            <a class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"lastStep()\">\n                <span class=\"fas fa-forward-fast\"></span>\n            </a>\n        </div>\n    </div>\n\n    <a class=\"dynamic-btn-icon dynamic-large-text dynamic-margin-right-extra-small\" (click)=\"close.emit()\">\n        <span class=\"fas fa-times\"></span>\n    </a>\n</div>\n\n<div class=\"dynamic-flex-row dynamic-flex-1\">\n    <relations-canvas-debug [nodeDefinitions]=\"nodeDefinitions\" class=\"dynamic-flex-1\"></relations-canvas-debug>\n</div>\n", dependencies: [{ kind: "component", type: RelationsCanvasDebugSAComponent, selector: "relations-canvas-debug" }, { kind: "pipe", type: StepNameSAPipe, name: "stepName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: RelationsDebuggerVisualizerSAComponent, decorators: [{
            type: Component,
            args: [{ selector: 'relations-debugger-visualizer', standalone: true, imports: [
                        RelationsCanvasDebugSAComponent,
                        StepNameSAPipe,
                    ], providers: [
                        RelationsNodeManager,
                        {
                            provide: RELATIONS_HISTORY_MANAGER,
                            useClass: MetadataHistoryManagerDebug,
                        },
                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dynamic-flex-row dynamic-margin-bottom-small\">\n    <div class=\"dynamic-flex-row\">\n        <div class=\"dynamic-margin-right-small\">{{currentStep?.timestamp}}</div>\n        <div class=\"dynamic-margin-right-small\">{{currentStep | stepName}}</div>\n    </div>\n\n    <div class=\"dynamic-flex-row dynamic-flex-1 dynamic-justify-content-center\">\n        <div>\n            <a class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"firstStep()\">\n                <span class=\"fas fa-backward-fast\"></span>\n            </a>\n\n            <a class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"previousStep()\">\n                <span class=\"fas fa-backward-step\"></span>\n            </a>\n\n            <a class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"togglePlay()\">\n                <span class=\"fas\" [class.fa-play]=\"!playing\" [class.fa-pause]=\"playing\"></span>\n            </a>\n\n            <a class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"nextStep()\">\n                <span class=\"fas fa-forward-step\"></span>\n            </a>\n\n            <a class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"lastStep()\">\n                <span class=\"fas fa-forward-fast\"></span>\n            </a>\n        </div>\n    </div>\n\n    <a class=\"dynamic-btn-icon dynamic-large-text dynamic-margin-right-extra-small\" (click)=\"close.emit()\">\n        <span class=\"fas fa-times\"></span>\n    </a>\n</div>\n\n<div class=\"dynamic-flex-row dynamic-flex-1\">\n    <relations-canvas-debug [nodeDefinitions]=\"nodeDefinitions\" class=\"dynamic-flex-1\"></relations-canvas-debug>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i1.RelationsDebugger }, { type: i0.ChangeDetectorRef }], propDecorators: { playDelay: [{
                type: Input
            }], relationsDefinition: [{
                type: Input
            }], close: [{
                type: Output
            }] } });
//# sourceMappingURL=relationsDebuggerVisualizer.component.js.map