import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../services/component-studio-state.service";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "@progress/kendo-angular-buttons";
import * as i5 from "@memberjunction/ng-code-editor";
import * as i6 from "@memberjunction/ng-markdown";
function RequirementsEditorComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 5)(1, "button", 12);
    i0.ɵɵlistener("click", function RequirementsEditorComponent_Conditional_6_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ApplyChanges()); });
    i0.ɵɵelement(2, "i", 13);
    i0.ɵɵtext(3, " Apply ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "button", 12);
    i0.ɵɵlistener("click", function RequirementsEditorComponent_Conditional_6_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CancelChanges()); });
    i0.ɵɵtext(5, " Cancel ");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    i0.ɵɵadvance();
    i0.ɵɵproperty("themeColor", "primary");
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("themeColor", "base");
} }
function RequirementsEditorComponent_Conditional_15_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "mj-markdown", 16);
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(3);
    i0.ɵɵproperty("data", ctx_r1.EditableContent)("enableCodeCopy", true);
} }
function RequirementsEditorComponent_Conditional_15_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
    const _r3 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 17);
    i0.ɵɵelement(1, "i", 18);
    i0.ɵɵelementStart(2, "p");
    i0.ɵɵtext(3);
    i0.ɵɵpipe(4, "lowercase");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "button", 19);
    i0.ɵɵlistener("click", function RequirementsEditorComponent_Conditional_15_Conditional_0_Conditional_2_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.SetViewMode("edit")); });
    i0.ɵɵelement(6, "i", 9);
    i0.ɵɵtext(7, " Start writing ");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1("No ", i0.ɵɵpipeBind1(4, 1, ctx_r1.Title), " defined yet.");
} }
function RequirementsEditorComponent_Conditional_15_Conditional_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 14);
    i0.ɵɵconditionalCreate(1, RequirementsEditorComponent_Conditional_15_Conditional_0_Conditional_1_Template, 1, 2, "mj-markdown", 16)(2, RequirementsEditorComponent_Conditional_15_Conditional_0_Conditional_2_Template, 8, 3, "div", 17);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.EditableContent ? 1 : 2);
} }
function RequirementsEditorComponent_Conditional_15_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    const _r4 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 15)(1, "mj-code-editor", 20);
    i0.ɵɵtwoWayListener("ngModelChange", function RequirementsEditorComponent_Conditional_15_Conditional_1_Template_mj_code_editor_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.EditableContent, $event) || (ctx_r1.EditableContent = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵlistener("ngModelChange", function RequirementsEditorComponent_Conditional_15_Conditional_1_Template_mj_code_editor_ngModelChange_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnContentChanged()); });
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditableContent);
    i0.ɵɵproperty("language", "markdown")("indentWithTab", true)("placeholder", "Enter " + ctx_r1.Title + " in markdown format...");
} }
function RequirementsEditorComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵconditionalCreate(0, RequirementsEditorComponent_Conditional_15_Conditional_0_Template, 3, 1, "div", 14)(1, RequirementsEditorComponent_Conditional_15_Conditional_1_Template, 2, 4, "div", 15);
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵconditional(ctx_r1.ViewMode === "preview" ? 0 : 1);
} }
function RequirementsEditorComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 11);
    i0.ɵɵelement(1, "i", 18);
    i0.ɵɵelementStart(2, "p");
    i0.ɵɵtext(3);
    i0.ɵɵpipe(4, "lowercase");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1("Select a component to view its ", i0.ɵɵpipeBind1(4, 1, ctx_r1.Title), ".");
} }
export class RequirementsEditorComponent {
    State;
    cdr;
    Field = 'functionalRequirements';
    Title = 'Functional Requirements';
    EditableContent = '';
    IsEditing = false;
    ViewMode = 'preview';
    stateChangedSub = null;
    constructor(State, cdr) {
        this.State = State;
        this.cdr = cdr;
    }
    get FieldIcon() {
        return this.Field === 'functionalRequirements' ? 'fa-clipboard-list' : 'fa-drafting-compass';
    }
    ngOnInit() {
        this.loadContent();
        this.stateChangedSub = this.State.StateChanged.subscribe(() => {
            if (!this.IsEditing) {
                this.loadContent();
            }
            this.cdr.detectChanges();
        });
    }
    ngOnDestroy() {
        if (this.stateChangedSub) {
            this.stateChangedSub.unsubscribe();
            this.stateChangedSub = null;
        }
    }
    SetViewMode(mode) {
        this.ViewMode = mode;
        this.cdr.detectChanges();
    }
    OnContentChanged() {
        this.IsEditing = true;
    }
    ApplyChanges() {
        try {
            const spec = JSON.parse(this.State.EditableSpec);
            spec[this.Field] = this.EditableContent;
            this.State.UpdateSpec(spec);
            this.IsEditing = false;
            this.ViewMode = 'preview';
        }
        catch (error) {
            console.error('Error applying requirements changes:', error);
        }
    }
    CancelChanges() {
        this.loadContent();
        this.IsEditing = false;
        this.ViewMode = 'preview';
        this.cdr.detectChanges();
    }
    loadContent() {
        try {
            const spec = JSON.parse(this.State.EditableSpec);
            this.EditableContent = spec[this.Field] || '';
        }
        catch {
            this.EditableContent = '';
        }
    }
    static ɵfac = function RequirementsEditorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RequirementsEditorComponent)(i0.ɵɵdirectiveInject(i1.ComponentStudioStateService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RequirementsEditorComponent, selectors: [["mj-requirements-editor"]], inputs: { Field: "Field", Title: "Title" }, standalone: false, decls: 17, vars: 8, consts: [[1, "requirements-editor"], [1, "editor-header"], [1, "header-title"], [1, "fa-solid", 3, "ngClass"], [1, "header-right"], [1, "action-buttons"], [1, "mode-toggle"], [1, "mode-btn", 3, "click"], [1, "fa-solid", "fa-eye"], [1, "fa-solid", "fa-pencil"], [1, "editor-body"], [1, "empty-state"], ["kendoButton", "", 1, "action-btn", 3, "click", "themeColor"], [1, "fa-solid", "fa-check"], [1, "preview-container"], [1, "code-editor-container"], [3, "data", "enableCodeCopy"], [1, "empty-preview"], [1, "fa-solid", "fa-file-lines"], [1, "edit-link", 3, "click"], [3, "ngModelChange", "ngModel", "language", "indentWithTab", "placeholder"]], template: function RequirementsEditorComponent_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);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(5, "div", 4);
            i0.ɵɵconditionalCreate(6, RequirementsEditorComponent_Conditional_6_Template, 6, 2, "div", 5);
            i0.ɵɵelementStart(7, "div", 6)(8, "button", 7);
            i0.ɵɵlistener("click", function RequirementsEditorComponent_Template_button_click_8_listener() { return ctx.SetViewMode("preview"); });
            i0.ɵɵelement(9, "i", 8);
            i0.ɵɵtext(10, " Preview ");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(11, "button", 7);
            i0.ɵɵlistener("click", function RequirementsEditorComponent_Template_button_click_11_listener() { return ctx.SetViewMode("edit"); });
            i0.ɵɵelement(12, "i", 9);
            i0.ɵɵtext(13, " Edit ");
            i0.ɵɵelementEnd()()()();
            i0.ɵɵelementStart(14, "div", 10);
            i0.ɵɵconditionalCreate(15, RequirementsEditorComponent_Conditional_15_Template, 2, 1)(16, RequirementsEditorComponent_Conditional_16_Template, 5, 3, "div", 11);
            i0.ɵɵelementEnd()();
        } if (rf & 2) {
            i0.ɵɵadvance(3);
            i0.ɵɵproperty("ngClass", ctx.FieldIcon);
            i0.ɵɵadvance();
            i0.ɵɵtextInterpolate1(" ", ctx.Title, " ");
            i0.ɵɵadvance(2);
            i0.ɵɵconditional(ctx.IsEditing ? 6 : -1);
            i0.ɵɵadvance(2);
            i0.ɵɵclassProp("active", ctx.ViewMode === "preview");
            i0.ɵɵadvance(3);
            i0.ɵɵclassProp("active", ctx.ViewMode === "edit");
            i0.ɵɵadvance(4);
            i0.ɵɵconditional(ctx.State.SelectedComponent ? 15 : 16);
        } }, dependencies: [i2.NgClass, i3.NgControlStatus, i3.NgModel, i4.ButtonComponent, i5.CodeEditorComponent, i6.MarkdownComponent, i2.LowerCasePipe], styles: [".requirements-editor[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\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      gap: 8px;\n    }\n\n    .header-title[_ngcontent-%COMP%] {\n      font-weight: 600;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n    }\n\n    .header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      margin-right: 6px;\n      color: var(--mj-brand-primary);\n    }\n\n    .header-right[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .action-buttons[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 6px;\n    }\n\n    .action-btn[_ngcontent-%COMP%] {\n      font-size: 12px;\n    }\n\n    .mode-toggle[_ngcontent-%COMP%] {\n      display: inline-flex;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .mode-btn[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 4px 10px;\n      border: none;\n      background: transparent;\n      color: var(--mj-text-secondary);\n      font-size: 11px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      font-family: inherit;\n    }\n\n    .mode-btn[_ngcontent-%COMP%]:not(:last-child) {\n      border-right: 1px solid var(--mj-border-default);\n    }\n\n    .mode-btn[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .mode-btn.active[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .mode-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 10px;\n    }\n\n    .editor-body[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .preview-container[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: auto;\n      padding: 16px 20px;\n    }\n\n    .code-editor-container[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n    }\n\n    .code-editor-container[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n      display: block;\n      height: 100%;\n    }\n\n    .empty-preview[_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    }\n\n    .empty-preview[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 32px;\n      margin-bottom: 12px;\n      opacity: 0.4;\n    }\n\n    .empty-preview[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0 0 12px;\n      font-size: 13px;\n    }\n\n    .edit-link[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 6px 14px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      background: transparent;\n      color: var(--mj-brand-primary);\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      font-family: inherit;\n    }\n\n    .edit-link[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\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\n    .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 32px;\n      margin-bottom: 12px;\n      opacity: 0.4;\n    }\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(RequirementsEditorComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'mj-requirements-editor', template: `
    <div class="requirements-editor">
      <div class="editor-header">
        <span class="header-title">
          <i class="fa-solid" [ngClass]="FieldIcon"></i>
          {{ Title }}
        </span>
        <div class="header-right">
          @if (IsEditing) {
            <div class="action-buttons">
              <button kendoButton [themeColor]="'primary'" (click)="ApplyChanges()" class="action-btn">
                <i class="fa-solid fa-check"></i> Apply
              </button>
              <button kendoButton [themeColor]="'base'" (click)="CancelChanges()" class="action-btn">
                Cancel
              </button>
            </div>
          }
          <div class="mode-toggle">
            <button class="mode-btn" [class.active]="ViewMode === 'preview'" (click)="SetViewMode('preview')">
              <i class="fa-solid fa-eye"></i> Preview
            </button>
            <button class="mode-btn" [class.active]="ViewMode === 'edit'" (click)="SetViewMode('edit')">
              <i class="fa-solid fa-pencil"></i> Edit
            </button>
          </div>
        </div>
      </div>

      <div class="editor-body">
        @if (State.SelectedComponent) {
          @if (ViewMode === 'preview') {
            <div class="preview-container">
              @if (EditableContent) {
                <mj-markdown [data]="EditableContent" [enableCodeCopy]="true"></mj-markdown>
              } @else {
                <div class="empty-preview">
                  <i class="fa-solid fa-file-lines"></i>
                  <p>No {{ Title | lowercase }} defined yet.</p>
                  <button class="edit-link" (click)="SetViewMode('edit')">
                    <i class="fa-solid fa-pencil"></i> Start writing
                  </button>
                </div>
              }
            </div>
          } @else {
            <div class="code-editor-container">
              <mj-code-editor
                [(ngModel)]="EditableContent"
                [language]="'markdown'"
                [indentWithTab]="true"
                [placeholder]="'Enter ' + Title + ' in markdown format...'"
                (ngModelChange)="OnContentChanged()">
              </mj-code-editor>
            </div>
          }
        } @else {
          <div class="empty-state">
            <i class="fa-solid fa-file-lines"></i>
            <p>Select a component to view its {{ Title | lowercase }}.</p>
          </div>
        }
      </div>
    </div>
  `, styles: ["\n    .requirements-editor {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\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      gap: 8px;\n    }\n\n    .header-title {\n      font-weight: 600;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n    }\n\n    .header-title i {\n      margin-right: 6px;\n      color: var(--mj-brand-primary);\n    }\n\n    .header-right {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .action-buttons {\n      display: flex;\n      gap: 6px;\n    }\n\n    .action-btn {\n      font-size: 12px;\n    }\n\n    .mode-toggle {\n      display: inline-flex;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .mode-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 4px 10px;\n      border: none;\n      background: transparent;\n      color: var(--mj-text-secondary);\n      font-size: 11px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      font-family: inherit;\n    }\n\n    .mode-btn:not(:last-child) {\n      border-right: 1px solid var(--mj-border-default);\n    }\n\n    .mode-btn:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .mode-btn.active {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .mode-btn i {\n      font-size: 10px;\n    }\n\n    .editor-body {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .preview-container {\n      flex: 1;\n      overflow: auto;\n      padding: 16px 20px;\n    }\n\n    .code-editor-container {\n      flex: 1;\n      overflow: hidden;\n    }\n\n    .code-editor-container mj-code-editor {\n      display: block;\n      height: 100%;\n    }\n\n    .empty-preview {\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    }\n\n    .empty-preview i {\n      font-size: 32px;\n      margin-bottom: 12px;\n      opacity: 0.4;\n    }\n\n    .empty-preview p {\n      margin: 0 0 12px;\n      font-size: 13px;\n    }\n\n    .edit-link {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 6px 14px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      background: transparent;\n      color: var(--mj-brand-primary);\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      font-family: inherit;\n    }\n\n    .edit-link:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\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\n    .empty-state i {\n      font-size: 32px;\n      margin-bottom: 12px;\n      opacity: 0.4;\n    }\n\n    .empty-state p {\n      margin: 0;\n      font-size: 13px;\n      text-align: center;\n    }\n  "] }]
    }], () => [{ type: i1.ComponentStudioStateService }, { type: i0.ChangeDetectorRef }], { Field: [{
            type: Input
        }], Title: [{
            type: Input
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RequirementsEditorComponent, { className: "RequirementsEditorComponent", filePath: "src/ComponentStudio/components/editors/requirements-editor.component.ts", lineNumber: 247 }); })();
//# sourceMappingURL=requirements-editor.component.js.map