import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { COMMON_CONDITIONS } from '../../models/connection.model';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-dropdowns";
import * as i2 from "@progress/kendo-angular-inputs";
import * as i3 from "@progress/kendo-angular-buttons";
export class SimpleConditionEditorComponent {
    constructor() {
        this.save = new EventEmitter();
        this.cancel = new EventEmitter();
        this.commonConditions = COMMON_CONDITIONS;
        this.selectedCondition = null;
        this.customExpression = '';
    }
    ngOnInit() {
        if (this.connection.condition) {
            // Try to find in common conditions
            const found = this.commonConditions.find(c => c.expression === this.connection.condition.expression);
            if (found) {
                this.selectedCondition = found;
            }
            else {
                // It's a custom expression
                this.customExpression = this.connection.condition.expression;
            }
        }
    }
    getPreview() {
        if (this.customExpression) {
            return `if (${this.customExpression})`;
        }
        else if (this.selectedCondition) {
            return `if (${this.selectedCondition.expression})`;
        }
        return 'Always';
    }
    onSave() {
        let condition;
        if (this.customExpression) {
            condition = {
                expression: this.customExpression,
                label: this.customExpression
            };
        }
        else if (this.selectedCondition) {
            condition = {
                expression: this.selectedCondition.expression,
                label: this.selectedCondition.label
            };
        }
        const updatedConnection = {
            ...this.connection,
            condition
        };
        this.save.emit(updatedConnection);
    }
    onCancel() {
        this.cancel.emit();
    }
    static { this.ɵfac = function SimpleConditionEditorComponent_Factory(t) { return new (t || SimpleConditionEditorComponent)(); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SimpleConditionEditorComponent, selectors: [["app-simple-condition-editor"]], inputs: { connection: "connection" }, outputs: { save: "save", cancel: "cancel" }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 26, vars: 11, consts: [[1, "condition-editor"], [1, "editor-header"], [1, "close-button", 3, "click"], [1, "fas", "fa-times"], [1, "editor-content"], [1, "condition-section"], ["textField", "label", "valueField", "expression", 3, "valueChange", "data", "value", "valuePrimitive"], [1, "custom-section"], ["placeholder", "e.g., isValid, hasData, response.ok", 3, "valueChange", "value"], [1, "preview-section"], [1, "preview-box"], [1, "preview-text"], [1, "editor-footer"], ["kendoButton", "", 3, "click", "themeColor"], ["kendoButton", "", 3, "click", "look"]], template: function SimpleConditionEditorComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h3");
            i0.ɵɵtext(3, "Edit Condition");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(4, "button", 2);
            i0.ɵɵlistener("click", function SimpleConditionEditorComponent_Template_button_click_4_listener() { return ctx.onCancel(); });
            i0.ɵɵelement(5, "i", 3);
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(6, "div", 4)(7, "div", 5)(8, "label");
            i0.ɵɵtext(9, "When:");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(10, "kendo-dropdownlist", 6);
            i0.ɵɵtwoWayListener("valueChange", function SimpleConditionEditorComponent_Template_kendo_dropdownlist_valueChange_10_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.selectedCondition, $event) || (ctx.selectedCondition = $event); return $event; });
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(11, "div", 7)(12, "label");
            i0.ɵɵtext(13, "Or enter custom expression:");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(14, "kendo-textbox", 8);
            i0.ɵɵtwoWayListener("valueChange", function SimpleConditionEditorComponent_Template_kendo_textbox_valueChange_14_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.customExpression, $event) || (ctx.customExpression = $event); return $event; });
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(15, "div", 9)(16, "label");
            i0.ɵɵtext(17, "Preview:");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(18, "div", 10)(19, "span", 11);
            i0.ɵɵtext(20);
            i0.ɵɵelementEnd()()()();
            i0.ɵɵelementStart(21, "div", 12)(22, "button", 13);
            i0.ɵɵlistener("click", function SimpleConditionEditorComponent_Template_button_click_22_listener() { return ctx.onSave(); });
            i0.ɵɵtext(23, " Save ");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(24, "button", 14);
            i0.ɵɵlistener("click", function SimpleConditionEditorComponent_Template_button_click_24_listener() { return ctx.onCancel(); });
            i0.ɵɵtext(25, " Cancel ");
            i0.ɵɵelementEnd()()();
        } if (rf & 2) {
            i0.ɵɵadvance(10);
            i0.ɵɵstyleProp("width", 100, "percent");
            i0.ɵɵproperty("data", ctx.commonConditions);
            i0.ɵɵtwoWayProperty("value", ctx.selectedCondition);
            i0.ɵɵproperty("valuePrimitive", false);
            i0.ɵɵadvance(4);
            i0.ɵɵstyleProp("width", 100, "percent");
            i0.ɵɵtwoWayProperty("value", ctx.customExpression);
            i0.ɵɵadvance(6);
            i0.ɵɵtextInterpolate(ctx.getPreview());
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("themeColor", "primary");
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("look", "outline");
        } }, dependencies: [CommonModule, FormsModule, DropDownsModule, i1.DropDownListComponent, InputsModule, i2.TextBoxComponent, ButtonsModule, i3.ButtonComponent], styles: [".condition-editor[_ngcontent-%COMP%] {\n      background: var(--white-color);\n      border-radius: var(--border-radius);\n      box-shadow: var(--shadow);\n      width: 400px;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n    \n    .editor-header[_ngcontent-%COMP%] {\n      padding: 1.5rem;\n      border-bottom: 1px solid var(--gray-700);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      background: var(--gray-600);\n      \n      h3 {\n        margin: 0;\n        font-size: 1.25rem;\n        color: var(--gray-900);\n      }\n    }\n    \n    .close-button[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      color: var(--gray-800);\n      cursor: pointer;\n      font-size: 1.25rem;\n      padding: 0.5rem;\n      border-radius: 50%;\n      width: 40px;\n      height: 40px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all var(--transition-time);\n      \n      &:hover {\n        background: var(--gray-700);\n        color: var(--gray-900);\n      }\n    }\n    \n    .editor-content[_ngcontent-%COMP%] {\n      flex: 1;\n      padding: 1.5rem;\n    }\n    \n    .condition-section[_ngcontent-%COMP%], \n   .custom-section[_ngcontent-%COMP%], \n   .preview-section[_ngcontent-%COMP%] {\n      margin-bottom: 1.5rem;\n      \n      label {\n        display: block;\n        margin-bottom: 0.5rem;\n        font-weight: 600;\n        color: var(--gray-900);\n      }\n    }\n    \n    .preview-section[_ngcontent-%COMP%] {\n      margin-bottom: 0;\n    }\n    \n    .preview-box[_ngcontent-%COMP%] {\n      background: var(--gray-600);\n      padding: 1rem;\n      border-radius: 0.5rem;\n      border: 1px solid var(--gray-700);\n    }\n    \n    .preview-text[_ngcontent-%COMP%] {\n      font-family: monospace;\n      font-size: 0.875rem;\n      color: var(--mj-blue);\n    }\n    \n    .editor-footer[_ngcontent-%COMP%] {\n      padding: 1rem 1.5rem;\n      border-top: 1px solid var(--gray-700);\n      display: flex;\n      justify-content: flex-end;\n      gap: 0.5rem;\n      background: var(--gray-600);\n    }"] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SimpleConditionEditorComponent, [{
        type: Component,
        args: [{ selector: 'app-simple-condition-editor', standalone: true, imports: [CommonModule, FormsModule, DropDownsModule, InputsModule, ButtonsModule], template: `
    <div class="condition-editor">
      <div class="editor-header">
        <h3>Edit Condition</h3>
        <button class="close-button" (click)="onCancel()">
          <i class="fas fa-times"></i>
        </button>
      </div>
      
      <div class="editor-content">
        <div class="condition-section">
          <label>When:</label>
          <kendo-dropdownlist
            [data]="commonConditions"
            [(value)]="selectedCondition"
            textField="label"
            valueField="expression"
            [valuePrimitive]="false"
            [style.width.percent]="100">
          </kendo-dropdownlist>
        </div>
        
        <div class="custom-section">
          <label>Or enter custom expression:</label>
          <kendo-textbox
            [(value)]="customExpression"
            placeholder="e.g., isValid, hasData, response.ok"
            [style.width.percent]="100">
          </kendo-textbox>
        </div>
        
        <div class="preview-section">
          <label>Preview:</label>
          <div class="preview-box">
            <span class="preview-text">{{ getPreview() }}</span>
          </div>
        </div>
      </div>
      
      <div class="editor-footer">
        <button 
          kendoButton 
          [themeColor]="'primary'"
          (click)="onSave()">
          Save
        </button>
        <button 
          kendoButton 
          [look]="'outline'"
          (click)="onCancel()">
          Cancel
        </button>
      </div>
    </div>
  `, styles: ["\n    .condition-editor {\n      background: var(--white-color);\n      border-radius: var(--border-radius);\n      box-shadow: var(--shadow);\n      width: 400px;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n    \n    .editor-header {\n      padding: 1.5rem;\n      border-bottom: 1px solid var(--gray-700);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      background: var(--gray-600);\n      \n      h3 {\n        margin: 0;\n        font-size: 1.25rem;\n        color: var(--gray-900);\n      }\n    }\n    \n    .close-button {\n      background: none;\n      border: none;\n      color: var(--gray-800);\n      cursor: pointer;\n      font-size: 1.25rem;\n      padding: 0.5rem;\n      border-radius: 50%;\n      width: 40px;\n      height: 40px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all var(--transition-time);\n      \n      &:hover {\n        background: var(--gray-700);\n        color: var(--gray-900);\n      }\n    }\n    \n    .editor-content {\n      flex: 1;\n      padding: 1.5rem;\n    }\n    \n    .condition-section,\n    .custom-section,\n    .preview-section {\n      margin-bottom: 1.5rem;\n      \n      label {\n        display: block;\n        margin-bottom: 0.5rem;\n        font-weight: 600;\n        color: var(--gray-900);\n      }\n    }\n    \n    .preview-section {\n      margin-bottom: 0;\n    }\n    \n    .preview-box {\n      background: var(--gray-600);\n      padding: 1rem;\n      border-radius: 0.5rem;\n      border: 1px solid var(--gray-700);\n    }\n    \n    .preview-text {\n      font-family: monospace;\n      font-size: 0.875rem;\n      color: var(--mj-blue);\n    }\n    \n    .editor-footer {\n      padding: 1rem 1.5rem;\n      border-top: 1px solid var(--gray-700);\n      display: flex;\n      justify-content: flex-end;\n      gap: 0.5rem;\n      background: var(--gray-600);\n    }\n  "] }]
    }], null, { connection: [{
            type: Input
        }], save: [{
            type: Output
        }], cancel: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SimpleConditionEditorComponent, { className: "SimpleConditionEditorComponent", filePath: "src/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/simple-condition-editor/simple-condition-editor.component.ts", lineNumber: 160 }); })();
//# sourceMappingURL=simple-condition-editor.component.js.map