import { Component } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "../../services/component-studio-state.service";
import * as i2 from "@angular/forms";
import * as i3 from "@memberjunction/ng-code-editor";
import * as i4 from "@memberjunction/ng-ui-components";
function DataRequirementsEditorComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 4)(1, "button", 7);
    i0.ɵɵlistener("click", function DataRequirementsEditorComponent_Conditional_5_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ApplyChanges()); });
    i0.ɵɵelement(2, "i", 8);
    i0.ɵɵtext(3, " Apply Changes ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "button", 9);
    i0.ɵɵlistener("click", function DataRequirementsEditorComponent_Conditional_5_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CancelChanges()); });
    i0.ɵɵelement(5, "i", 10);
    i0.ɵɵtext(6, " Cancel ");
    i0.ɵɵelementEnd()();
} }
function DataRequirementsEditorComponent_Conditional_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 11)(1, "span", 14);
    i0.ɵɵelement(2, "i", 15);
    i0.ɵɵtext(3);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "span", 14);
    i0.ɵɵelement(5, "i", 16);
    i0.ɵɵtext(6);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(7, "span", 17);
    i0.ɵɵtext(8);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate2(" ", ctx_r1.EntityCount, " ", ctx_r1.EntityCount === 1 ? "entity" : "entities", " ");
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate2(" ", ctx_r1.QueryCount, " ", ctx_r1.QueryCount === 1 ? "query" : "queries", " ");
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", ctx_r1.DataMode, " ");
} }
function DataRequirementsEditorComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
    const _r3 = i0.ɵɵgetCurrentView();
    i0.ɵɵconditionalCreate(0, DataRequirementsEditorComponent_Conditional_7_Conditional_0_Template, 9, 5, "div", 11);
    i0.ɵɵelementStart(1, "div", 12)(2, "mj-code-editor", 13);
    i0.ɵɵtwoWayListener("ngModelChange", function DataRequirementsEditorComponent_Conditional_7_Template_mj_code_editor_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditableContent, $event) || (ctx_r1.EditableContent = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵlistener("ngModelChange", function DataRequirementsEditorComponent_Conditional_7_Template_mj_code_editor_ngModelChange_2_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnContentChanged()); });
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵconditional(ctx_r1.HasDataRequirements ? 0 : -1);
    i0.ɵɵadvance(2);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditableContent);
    i0.ɵɵproperty("language", "json")("indentWithTab", true)("placeholder", "Enter data requirements JSON...");
} }
function DataRequirementsEditorComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 6);
    i0.ɵɵelement(1, "i", 3);
    i0.ɵɵelementStart(2, "p");
    i0.ɵɵtext(3, "Select a component to edit its data requirements.");
    i0.ɵɵelementEnd()();
} }
export class DataRequirementsEditorComponent {
    State;
    cdr;
    EditableContent = '';
    IsEditing = false;
    _parsedRequirements = null;
    destroy$ = new Subject();
    constructor(State, cdr) {
        this.State = State;
        this.cdr = cdr;
    }
    get HasDataRequirements() {
        return this._parsedRequirements != null;
    }
    get EntityCount() {
        if (!this._parsedRequirements)
            return 0;
        const entities = this._parsedRequirements['entities'];
        return Array.isArray(entities) ? entities.length : 0;
    }
    get QueryCount() {
        if (!this._parsedRequirements)
            return 0;
        const queries = this._parsedRequirements['queries'];
        return Array.isArray(queries) ? queries.length : 0;
    }
    get DataMode() {
        if (!this._parsedRequirements)
            return '';
        return this._parsedRequirements['mode'] || 'views';
    }
    ngOnInit() {
        this.loadContent();
        this.State.StateChanged.pipe(takeUntil(this.destroy$)).subscribe(() => {
            this.loadContent();
            this.cdr.detectChanges();
        });
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
    OnContentChanged() {
        this.IsEditing = true;
        this.parseContent();
    }
    ApplyChanges() {
        try {
            const spec = JSON.parse(this.State.EditableSpec);
            const dataReq = JSON.parse(this.EditableContent);
            spec.dataRequirements = dataReq;
            this.IsEditing = false;
            this.State.UpdateSpec(spec);
            this.cdr.detectChanges();
        }
        catch (error) {
            console.error('Error applying data requirements changes:', error);
        }
    }
    CancelChanges() {
        this.loadContent();
        this.IsEditing = false;
        this.cdr.detectChanges();
    }
    loadContent() {
        try {
            const spec = JSON.parse(this.State.EditableSpec);
            const dataReq = spec.dataRequirements || { mode: 'views', entities: [], queries: [] };
            this.EditableContent = JSON.stringify(dataReq, null, 2);
            this.parseContent();
        }
        catch {
            this.EditableContent = '';
            this._parsedRequirements = null;
        }
    }
    parseContent() {
        try {
            this._parsedRequirements = JSON.parse(this.EditableContent);
        }
        catch {
            this._parsedRequirements = null;
        }
    }
    static ɵfac = function DataRequirementsEditorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DataRequirementsEditorComponent)(i0.ɵɵdirectiveInject(i1.ComponentStudioStateService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DataRequirementsEditorComponent, selectors: [["mj-data-requirements-editor"]], standalone: false, decls: 9, vars: 2, consts: [[1, "data-requirements-editor"], [1, "editor-header"], [1, "header-title"], [1, "fa-solid", "fa-database"], [1, "action-buttons"], [1, "editor-body"], [1, "empty-state"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "fa-solid", "fa-check"], ["mjButton", "", 3, "click"], [1, "fa-solid", "fa-times"], [1, "summary-bar"], [1, "json-editor-container"], [3, "ngModelChange", "ngModel", "language", "indentWithTab", "placeholder"], [1, "summary-item"], [1, "fa-solid", "fa-table"], [1, "fa-solid", "fa-search"], [1, "summary-item", "mode-badge"]], template: function DataRequirementsEditorComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "span", 2);
            i0.ɵɵelement(3, "i", 3);
            i0.ɵɵtext(4, " Data Requirements ");
            i0.ɵɵelementEnd();
            i0.ɵɵconditionalCreate(5, DataRequirementsEditorComponent_Conditional_5_Template, 7, 0, "div", 4);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(6, "div", 5);
            i0.ɵɵconditionalCreate(7, DataRequirementsEditorComponent_Conditional_7_Template, 3, 5)(8, DataRequirementsEditorComponent_Conditional_8_Template, 4, 0, "div", 6);
            i0.ɵɵelementEnd()();
        } if (rf & 2) {
            i0.ɵɵadvance(5);
            i0.ɵɵconditional(ctx.IsEditing ? 5 : -1);
            i0.ɵɵadvance(2);
            i0.ɵɵconditional(ctx.State.SelectedComponent ? 7 : 8);
        } }, dependencies: [i2.NgControlStatus, i2.NgModel, i3.CodeEditorComponent, i4.MJButtonDirective], styles: [".data-requirements-editor[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n    .editor-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 8px 12px;\n      border-bottom: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface);\n      flex-shrink: 0;\n    }\n    .header-title[_ngcontent-%COMP%] {\n      font-weight: 600;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n    }\n    .header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      margin-right: 6px;\n      color: var(--mj-text-secondary);\n    }\n    .action-buttons[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 6px;\n    }\n    .summary-bar[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      padding: 6px 12px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      border-bottom: 1px solid var(--mj-border-default);\n      font-size: 12px;\n      color: var(--mj-brand-primary);\n      flex-shrink: 0;\n    }\n    .summary-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n    .mode-badge[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n      padding: 1px 8px;\n      border-radius: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      font-size: 10px;\n    }\n    .editor-body[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n    .json-editor-container[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n    }\n    .json-editor-container[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n      display: block;\n      height: 100%;\n    }\n    .empty-state[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 40px 20px;\n      color: var(--mj-text-secondary);\n      flex: 1;\n    }\n    .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 32px;\n      margin-bottom: 12px;\n    }\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 13px;\n      text-align: center;\n    }"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DataRequirementsEditorComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'mj-data-requirements-editor', template: `
    <div class="data-requirements-editor">
      <div class="editor-header">
        <span class="header-title">
          <i class="fa-solid fa-database"></i>
          Data Requirements
        </span>
        @if (IsEditing) {
          <div class="action-buttons">
            <button mjButton variant="primary" (click)="ApplyChanges()">
              <i class="fa-solid fa-check"></i> Apply Changes
            </button>
            <button mjButton (click)="CancelChanges()">
              <i class="fa-solid fa-times"></i> Cancel
            </button>
          </div>
        }
      </div>

      <div class="editor-body">
        @if (State.SelectedComponent) {
          @if (HasDataRequirements) {
            <div class="summary-bar">
              <span class="summary-item">
                <i class="fa-solid fa-table"></i>
                {{ EntityCount }} {{ EntityCount === 1 ? 'entity' : 'entities' }}
              </span>
              <span class="summary-item">
                <i class="fa-solid fa-search"></i>
                {{ QueryCount }} {{ QueryCount === 1 ? 'query' : 'queries' }}
              </span>
              <span class="summary-item mode-badge">
                {{ DataMode }}
              </span>
            </div>
          }
          <div class="json-editor-container">
            <mj-code-editor
              [(ngModel)]="EditableContent"
              [language]="'json'"
              [indentWithTab]="true"
              [placeholder]="'Enter data requirements JSON...'"
              (ngModelChange)="OnContentChanged()">
            </mj-code-editor>
          </div>
        } @else {
          <div class="empty-state">
            <i class="fa-solid fa-database"></i>
            <p>Select a component to edit its data requirements.</p>
          </div>
        }
      </div>
    </div>
  `, styles: ["\n    .data-requirements-editor {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n    .editor-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 8px 12px;\n      border-bottom: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface);\n      flex-shrink: 0;\n    }\n    .header-title {\n      font-weight: 600;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n    }\n    .header-title i {\n      margin-right: 6px;\n      color: var(--mj-text-secondary);\n    }\n    .action-buttons {\n      display: flex;\n      gap: 6px;\n    }\n    .summary-bar {\n      display: flex;\n      gap: 12px;\n      padding: 6px 12px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      border-bottom: 1px solid var(--mj-border-default);\n      font-size: 12px;\n      color: var(--mj-brand-primary);\n      flex-shrink: 0;\n    }\n    .summary-item {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n    .mode-badge {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n      padding: 1px 8px;\n      border-radius: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      font-size: 10px;\n    }\n    .editor-body {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n    .json-editor-container {\n      flex: 1;\n      overflow: hidden;\n    }\n    .json-editor-container mj-code-editor {\n      display: block;\n      height: 100%;\n    }\n    .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 40px 20px;\n      color: var(--mj-text-secondary);\n      flex: 1;\n    }\n    .empty-state i {\n      font-size: 32px;\n      margin-bottom: 12px;\n    }\n    .empty-state p {\n      margin: 0;\n      font-size: 13px;\n      text-align: center;\n    }\n  "] }]
    }], () => [{ type: i1.ComponentStudioStateService }, { type: i0.ChangeDetectorRef }], null); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DataRequirementsEditorComponent, { className: "DataRequirementsEditorComponent", filePath: "src/ComponentStudio/components/editors/data-requirements-editor.component.ts", lineNumber: 150 }); })();
//# sourceMappingURL=data-requirements-editor.component.js.map