import { Component, ChangeDetectionStrategy, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BodyRenderSADirective, PositionPlacement, PositionToSADirective, TooltipModule } from '@anglr/common';
import { RelationsDebugger } from '@anglr/dynamic/relations';
import { RelationsNodeBase } from '@anglr/dynamic/relations-editor';
import { Subscription } from 'rxjs';
import { JsonFormattedSAPipe } from '../../../pipes';
import { RelationNodeInputDebugSAComponent, RelationNodeOutputDebugSAComponent } from '../../../components';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@anglr/common";
/**
 * Relations node component for debugger node
 */
export class DebuggerNodeSAComponent extends RelationsNodeBase {
    constructor() {
        super(...arguments);
        //######################### protected properties #########################
        /**
         * Subscriptions created during initialization
         */
        this.initSubscriptions = new Subscription();
        /**
         * Instance of relations debugger
         */
        this.relationsDebugger = inject(RelationsDebugger);
        //######################### protected properties - template bindings #########################
        /**
         * Indication whether was this relations component already registered
         */
        this.registered = false;
        /**
         * Array of component ids
         */
        this.components = [];
        /**
         * Current state of all components
         */
        this.state = [];
        /**
         * Tooltip options
         */
        this.tooltipOptions = {
            position: {
                placement: PositionPlacement.TopStart,
                offset: 'None',
            },
            allowSelection: true,
            tooltipCssClass: 'relations-debugger-tooltip',
        };
    }
    //######################### public methods - overrides #########################
    /**
     * @inheritdoc
     */
    ngOnDestroy() {
        super.ngOnDestroy();
        this.initSubscriptions.unsubscribe();
    }
    /**
     * @inheritdoc
     */
    initialize() {
        this.initSubscriptions.add(this.relationsDebugger.stepChange.subscribe(() => this.readNodesData()));
    }
    //######################### protected methods - overrides #########################
    /**
     * @inheritdoc
     */
    metadataSet() {
        if (!this.metadata) {
            return;
        }
        this.componentDef = this.relationsDebugger.getComponentDef(this.metadata.id);
        this.readNodesData();
    }
    //######################### protected methods #########################
    /**
     * Reads node data for current step
     */
    readNodesData() {
        if (!this.metadata) {
            return;
        }
        const components = this.relationsDebugger.getCurrentComponents();
        //unregistered
        if (!components[this.metadata.id]) {
            this.element.nativeElement.classList.add('unregistered');
            this.registered = false;
            return;
        }
        this.registered = true;
        this.element.nativeElement.classList.remove('unregistered');
        this.step = this.relationsDebugger.getCurrentStep();
        //registration step
        if (this.step?.componentRegistration?.componentId == this.metadata.id) {
            this.element.nativeElement.classList.add('registration-step');
        }
        else {
            this.element.nativeElement.classList.remove('registration-step');
        }
        //input transfer data step
        if (this.step?.dataTransfer?.inputComponentId == this.metadata.id) {
            this.transferInput = this.step.dataTransfer.inputName;
        }
        else {
            this.transferInput = null;
        }
        //output transfer data step
        if (this.step?.dataTransfer?.outputComponentId == this.metadata.id) {
            this.transferOutput = this.step.dataTransfer.outputName;
        }
        else {
            this.transferOutput = null;
        }
        this.state = this.relationsDebugger.getComponentState(this.metadata.id);
        this.components = components[this.metadata.id] ?? [];
    }
}
DebuggerNodeSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DebuggerNodeSAComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
DebuggerNodeSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: DebuggerNodeSAComponent, isStandalone: true, selector: "debugger-node", usesInheritance: true, ngImport: i0, template: "<div class=\"relations-node-header\">\n    <div class=\"header-content\" tooltip=\"id: {{metadata?.id}}\">{{metadata?.name}}</div>\n</div>\n\n<div class=\"node-content\">\n    <div class=\"inputs-outputs\" *ngIf=\"registered\">\n        <div class=\"inputs\">\n            <div class=\"input\" [class.transfer-endpoint]=\"transferInput == input\" *ngFor=\"let input of componentDef?.inputs\">\n                <relation-node-input-debug [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" [name]=\"input\" [parent]=\"this\" [transferHighlight]=\"transferInput == input\"/>\n                <div>{{input}}</div>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n            <div class=\"output\" [class.transfer-endpoint]=\"transferOutput == output\" *ngFor=\"let output of componentDef?.outputs\">\n                <ng-container *ngIf=\"transferOutput == output\">\n                    <div *bodyRender class=\"endpoint-transfer-detail\" [positionTo]=\"outNode.htmlElement\" [autoUpdate]=\"true\" placement=\"Right\">\n                        <div class=\"dynamic-bold dynamic-margin-bottom-small\">{{output}}</div>\n\n                        <div><span class=\"dynamic-semi-bold\">scope:</span> {{step?.dataTransfer?.scope}}</div>\n                        <div><span class=\"dynamic-semi-bold\">initial:</span> {{step?.dataTransfer?.change?.firstChange}}</div>\n                        <div class=\"dynamic-semi-bold\">previous value:</div>\n                        <div class=\"formatted-json\">{{step?.dataTransfer?.change?.previousValue | jsonFormatted}}</div>\n                        <div class=\"dynamic-semi-bold\">current value:</div>\n                        <div class=\"formatted-json\">{{step?.dataTransfer?.change?.currentValue | jsonFormatted}}</div>\n                    </div>\n                </ng-container>\n\n                <div>{{output}}</div>\n                <relation-node-output-debug #outNode [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" [name]=\"output\" [parent]=\"this\"/>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"debugger-node-overlay\" tooltip [tooltipOptions]=\"tooltipOptions\">\n    <div *tooltipTemplate class=\"relations-debugger-node-detail dynamic-thin-scrollbar\">\n        <div class=\"dynamic-bold\">{{this.metadata?.id}}</div>\n\n        <div *ngFor=\"let stat of state\">\n            <div class=\"dynamic-semi-bold\">#{{stat.componentInternalId}}</div>\n\n            <div class=\"dynamic-text-uppercase dynamic-bold dynamic-margin-top-small dynamic-margin-bottom-extra-small\">relations options</div>\n\n            <div class=\"formatted-json\">{{metadata?.relationsOptions | jsonFormatted}}</div>\n\n            <div class=\"inputs-outputs-grid\">\n                <div class=\"dynamic-text-uppercase dynamic-bold dynamic-margin-bottom-extra-small\">inputs</div>\n                <div class=\"dynamic-text-uppercase dynamic-bold dynamic-margin-bottom-extra-small\">outputs</div>\n\n                <div>\n                    <div *ngFor=\"let input of stat.inputs | keyvalue\" class=\"dynamic-margin-bottom-extra-small\">\n                        <div class=\"dynamic-semi-bold\">{{input.key}}:</div>\n                        <div class=\"formatted-json\">{{input.value | jsonFormatted}}</div>\n                    </div>\n                </div>\n\n                <div>\n                    <div *ngFor=\"let output of stat.outputs | keyvalue\" class=\"dynamic-margin-bottom-extra-small\">\n                        <div class=\"dynamic-semi-bold dynamic-flex-row dynamic-align-items-center\">\n                            <div>{{output.key}}:</div>\n                            <div tooltip=\"skip init\" class=\"dynamic-margin-left-extra-small fas fa-forward\" [class.inactive-flag]=\"!output.value.skipInit\"></div>\n                            <div tooltip=\"assigned\" class=\"dynamic-margin-left-extra-small fas fa-check-to-slot\" [class.inactive-flag]=\"!output.value.assigned\"></div>\n                        </div>\n\n                        <div class=\"formatted-json\">{{output.value.value | jsonFormatted}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "allowHtml", "template", "tooltipOptions", "tooltipVisible", "containerElement"] }, { kind: "directive", type: i2.TooltipTemplateDirective, selector: "[tooltipTemplate]" }, { kind: "component", type: RelationNodeInputDebugSAComponent, selector: "relation-node-input-debug", inputs: ["transferHighlight"] }, { kind: "component", type: RelationNodeOutputDebugSAComponent, selector: "relation-node-output-debug" }, { kind: "pipe", type: JsonFormattedSAPipe, name: "jsonFormatted" }, { kind: "directive", type: PositionToSADirective, selector: "[positionTo]", inputs: ["positionTo", "placement", "offset", "autoUpdate"], outputs: ["flip", "done"] }, { kind: "directive", type: BodyRenderSADirective, selector: "[bodyRender]", inputs: ["bodyRender"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DebuggerNodeSAComponent, decorators: [{
            type: Component,
            args: [{ selector: 'debugger-node', standalone: true, imports: [
                        CommonModule,
                        TooltipModule,
                        RelationNodeInputDebugSAComponent,
                        RelationNodeOutputDebugSAComponent,
                        JsonFormattedSAPipe,
                        PositionToSADirective,
                        BodyRenderSADirective,
                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relations-node-header\">\n    <div class=\"header-content\" tooltip=\"id: {{metadata?.id}}\">{{metadata?.name}}</div>\n</div>\n\n<div class=\"node-content\">\n    <div class=\"inputs-outputs\" *ngIf=\"registered\">\n        <div class=\"inputs\">\n            <div class=\"input\" [class.transfer-endpoint]=\"transferInput == input\" *ngFor=\"let input of componentDef?.inputs\">\n                <relation-node-input-debug [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" [name]=\"input\" [parent]=\"this\" [transferHighlight]=\"transferInput == input\"/>\n                <div>{{input}}</div>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n            <div class=\"output\" [class.transfer-endpoint]=\"transferOutput == output\" *ngFor=\"let output of componentDef?.outputs\">\n                <ng-container *ngIf=\"transferOutput == output\">\n                    <div *bodyRender class=\"endpoint-transfer-detail\" [positionTo]=\"outNode.htmlElement\" [autoUpdate]=\"true\" placement=\"Right\">\n                        <div class=\"dynamic-bold dynamic-margin-bottom-small\">{{output}}</div>\n\n                        <div><span class=\"dynamic-semi-bold\">scope:</span> {{step?.dataTransfer?.scope}}</div>\n                        <div><span class=\"dynamic-semi-bold\">initial:</span> {{step?.dataTransfer?.change?.firstChange}}</div>\n                        <div class=\"dynamic-semi-bold\">previous value:</div>\n                        <div class=\"formatted-json\">{{step?.dataTransfer?.change?.previousValue | jsonFormatted}}</div>\n                        <div class=\"dynamic-semi-bold\">current value:</div>\n                        <div class=\"formatted-json\">{{step?.dataTransfer?.change?.currentValue | jsonFormatted}}</div>\n                    </div>\n                </ng-container>\n\n                <div>{{output}}</div>\n                <relation-node-output-debug #outNode [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" [name]=\"output\" [parent]=\"this\"/>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"debugger-node-overlay\" tooltip [tooltipOptions]=\"tooltipOptions\">\n    <div *tooltipTemplate class=\"relations-debugger-node-detail dynamic-thin-scrollbar\">\n        <div class=\"dynamic-bold\">{{this.metadata?.id}}</div>\n\n        <div *ngFor=\"let stat of state\">\n            <div class=\"dynamic-semi-bold\">#{{stat.componentInternalId}}</div>\n\n            <div class=\"dynamic-text-uppercase dynamic-bold dynamic-margin-top-small dynamic-margin-bottom-extra-small\">relations options</div>\n\n            <div class=\"formatted-json\">{{metadata?.relationsOptions | jsonFormatted}}</div>\n\n            <div class=\"inputs-outputs-grid\">\n                <div class=\"dynamic-text-uppercase dynamic-bold dynamic-margin-bottom-extra-small\">inputs</div>\n                <div class=\"dynamic-text-uppercase dynamic-bold dynamic-margin-bottom-extra-small\">outputs</div>\n\n                <div>\n                    <div *ngFor=\"let input of stat.inputs | keyvalue\" class=\"dynamic-margin-bottom-extra-small\">\n                        <div class=\"dynamic-semi-bold\">{{input.key}}:</div>\n                        <div class=\"formatted-json\">{{input.value | jsonFormatted}}</div>\n                    </div>\n                </div>\n\n                <div>\n                    <div *ngFor=\"let output of stat.outputs | keyvalue\" class=\"dynamic-margin-bottom-extra-small\">\n                        <div class=\"dynamic-semi-bold dynamic-flex-row dynamic-align-items-center\">\n                            <div>{{output.key}}:</div>\n                            <div tooltip=\"skip init\" class=\"dynamic-margin-left-extra-small fas fa-forward\" [class.inactive-flag]=\"!output.value.skipInit\"></div>\n                            <div tooltip=\"assigned\" class=\"dynamic-margin-left-extra-small fas fa-check-to-slot\" [class.inactive-flag]=\"!output.value.assigned\"></div>\n                        </div>\n\n                        <div class=\"formatted-json\">{{output.value.value | jsonFormatted}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>" }]
        }] });
//# sourceMappingURL=debuggerNode.component.js.map