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 * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-dropdowns";
export class StepComponent {
    constructor() {
        this.selected = false;
        this.executing = false;
        this.stepSelected = new EventEmitter();
        this.stepDeleted = new EventEmitter();
        this.stepUpdated = new EventEmitter();
        this.socketMouseDown = new EventEmitter();
        this.socketMouseEnter = new EventEmitter();
        this.socketMouseLeave = new EventEmitter();
    }
    get selectedOption() {
        if (!this.step.selectedOption)
            return null;
        return this.step.config.options.find(opt => opt.value === this.step.selectedOption) || null;
    }
    onDelete(event) {
        event.stopPropagation();
        this.stepDeleted.emit(this.step);
    }
    onOptionChange(option) {
        if (option) {
            this.step.selectedOption = option.value;
            this.stepUpdated.emit(this.step);
        }
    }
    onSocketMouseDown(event, type) {
        event.stopPropagation();
        event.preventDefault();
        this.socketMouseDown.emit({ event, step: this.step, type });
    }
    onSocketMouseEnter(event, type) {
        this.socketMouseEnter.emit({ event, step: this.step, type });
    }
    onSocketMouseLeave(event) {
        this.socketMouseLeave.emit(event);
    }
    onStepClick(event) {
        event.stopPropagation();
        this.stepSelected.emit(this.step);
    }
    getStepIcon() {
        // Return icon class based on step type
        switch (this.step.type) {
            case 'prompt':
                return 'fas fa-comment-dots'; // Chat bubble for prompts
            case 'action':
                return 'fas fa-bolt'; // Lightning bolt for actions
            case 'agent':
                return 'fas fa-robot'; // Robot for sub-agents
            default:
                return 'fas fa-cog'; // Default gear icon
        }
    }
    getStepIconColor() {
        // Return color based on step type
        switch (this.step.type) {
            case 'prompt':
                return '#3B82F6'; // Blue for prompts
            case 'action':
                return '#F59E0B'; // Amber for actions
            case 'agent':
                return '#8B5CF6'; // Purple for sub-agents
            default:
                return '#6B7280'; // Gray default
        }
    }
    static { this.ɵfac = function StepComponent_Factory(t) { return new (t || StepComponent)(); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: StepComponent, selectors: [["app-step"]], inputs: { step: "step", selected: "selected", executing: "executing" }, outputs: { stepSelected: "stepSelected", stepDeleted: "stepDeleted", stepUpdated: "stepUpdated", socketMouseDown: "socketMouseDown", socketMouseEnter: "socketMouseEnter", socketMouseLeave: "socketMouseLeave" }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 13, vars: 13, consts: [[1, "step", 3, "click"], [1, "step-header"], [1, "step-title"], [1, "step-actions"], ["title", "Delete Step", 1, "icon-button", "small", 3, "click"], [1, "fas", "fa-times"], [1, "step-content"], ["textField", "name", "valueField", "value", 1, "step-dropdown", 3, "valueChange", "data", "value", "placeholder", "valuePrimitive"], [1, "socket", "input", 3, "mousedown", "mouseenter", "mouseleave"], [1, "socket", "output", 3, "mousedown", "mouseenter", "mouseleave"]], template: function StepComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0);
            i0.ɵɵlistener("click", function StepComponent_Template_div_click_0_listener($event) { return ctx.onStepClick($event); });
            i0.ɵɵelementStart(1, "div", 1)(2, "div", 2);
            i0.ɵɵelement(3, "i");
            i0.ɵɵelementStart(4, "span");
            i0.ɵɵtext(5);
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(6, "div", 3)(7, "button", 4);
            i0.ɵɵlistener("click", function StepComponent_Template_button_click_7_listener($event) { return ctx.onDelete($event); });
            i0.ɵɵelement(8, "i", 5);
            i0.ɵɵelementEnd()()();
            i0.ɵɵelementStart(9, "div", 6)(10, "kendo-combobox", 7);
            i0.ɵɵlistener("valueChange", function StepComponent_Template_kendo_combobox_valueChange_10_listener($event) { return ctx.onOptionChange($event); });
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(11, "div", 8);
            i0.ɵɵlistener("mousedown", function StepComponent_Template_div_mousedown_11_listener($event) { return ctx.onSocketMouseDown($event, "input"); })("mouseenter", function StepComponent_Template_div_mouseenter_11_listener($event) { return ctx.onSocketMouseEnter($event, "input"); })("mouseleave", function StepComponent_Template_div_mouseleave_11_listener($event) { return ctx.onSocketMouseLeave($event); });
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(12, "div", 9);
            i0.ɵɵlistener("mousedown", function StepComponent_Template_div_mousedown_12_listener($event) { return ctx.onSocketMouseDown($event, "output"); })("mouseenter", function StepComponent_Template_div_mouseenter_12_listener($event) { return ctx.onSocketMouseEnter($event, "output"); })("mouseleave", function StepComponent_Template_div_mouseleave_12_listener($event) { return ctx.onSocketMouseLeave($event); });
            i0.ɵɵelementEnd()();
        } if (rf & 2) {
            i0.ɵɵclassProp("selected", ctx.selected)("executing", ctx.executing);
            i0.ɵɵadvance(3);
            i0.ɵɵclassMap(ctx.getStepIcon());
            i0.ɵɵstyleProp("color", ctx.getStepIconColor());
            i0.ɵɵadvance(2);
            i0.ɵɵtextInterpolate(ctx.step.name);
            i0.ɵɵadvance(5);
            i0.ɵɵproperty("data", ctx.step.config.options)("value", ctx.selectedOption)("placeholder", "Select " + ctx.step.config.name + "...")("valuePrimitive", false);
        } }, dependencies: [CommonModule, FormsModule, DropDownsModule, i1.ComboBoxComponent], styles: [".step[_ngcontent-%COMP%] {\n      width: 320px;\n      height: 140px;\n      position: relative;\n      background: var(--white-color);\n      border: 1px solid var(--gray-700);\n      border-radius: var(--border-radius);\n      transition: all var(--transition-time);\n      box-shadow: var(--shadow);\n      overflow: visible; \n\n    }\n\n    .step[_ngcontent-%COMP%]:hover {\n      box-shadow: 0 6px 16px rgba(0,0,0,0.2);\n      transform: translateY(-2px);\n    }\n\n    .step.selected[_ngcontent-%COMP%] {\n      border-color: var(--mj-blue);\n      box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.25);\n    }\n\n    .step.executing[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_pulse-border 1.5s infinite;\n      border-color: #28a745;\n      box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.3);\n    }\n\n    @keyframes _ngcontent-%COMP%_pulse-border {\n      0% {\n        box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.3);\n      }\n      50% {\n        box-shadow: 0 0 0 6px rgba(40, 167, 69, 0.1);\n      }\n      100% {\n        box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.3);\n      }\n    }\n\n    .step-header[_ngcontent-%COMP%] {\n      padding: 0.75rem 1rem;\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      border-radius: calc(var(--border-radius) - 2px) calc(var(--border-radius) - 2px) 0 0;\n      overflow: hidden; \n\n    }\n\n    .step-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      font-weight: 600;\n      font-size: 0.875rem;\n      flex: 1;\n      overflow: hidden;\n    }\n    \n    .step-title[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .step-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 0.25rem;\n    }\n\n    .step-content[_ngcontent-%COMP%] {\n      padding: 1rem;\n      height: calc(100% - 41px); \n\n      display: flex;\n      align-items: center;\n    }\n\n    .step-dropdown[_ngcontent-%COMP%] {\n      width: 100%;\n      margin: 0.5rem 0;\n    }\n    \n    [_nghost-%COMP%]     .k-combobox {\n      width: 100%;\n      border-radius: 0.5rem;\n      border-color: var(--gray-700);\n      transition: all var(--transition-time);\n    }\n    \n    [_nghost-%COMP%]     .k-combobox:hover {\n      border-color: var(--mj-blue);\n    }\n    \n    [_nghost-%COMP%]     .k-combobox.k-focus {\n      border-color: var(--mj-blue);\n      box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.25);\n    }\n\n    .socket[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      width: 16px;\n      height: 16px;\n      border: 2px solid var(--white-color);\n      border-radius: 50%;\n      background: var(--gray-800);\n      z-index: 10;\n      box-shadow: var(--shadow);\n      cursor: crosshair;\n      transition: all var(--transition-time);\n    }\n\n    .socket.input[_ngcontent-%COMP%] {\n      left: -8px;\n    }\n\n    .socket.output[_ngcontent-%COMP%] {\n      right: -8px;\n    }\n\n    .socket[_ngcontent-%COMP%]:hover {\n      background: var(--mj-blue);\n      transform: translateY(-50%) scale(1.2);\n      box-shadow: 0 3px 6px rgba(0,0,0,0.3);\n    }\n    \n    .socket.connecting[_ngcontent-%COMP%] {\n      background: #28a745;\n      animation: _ngcontent-%COMP%_pulse 1s infinite;\n    }\n    \n    @keyframes _ngcontent-%COMP%_pulse {\n      0% { transform: translateY(-50%) scale(1); }\n      50% { transform: translateY(-50%) scale(1.3); }\n      100% { transform: translateY(-50%) scale(1); }\n    }\n\n    .icon-button[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 24px;\n      height: 24px;\n      border: none;\n      border-radius: 50%;\n      background: transparent;\n      color: var(--gray-800);\n      cursor: pointer;\n      transition: all var(--transition-time);\n      font-size: 0.75rem;\n    }\n\n    .icon-button[_ngcontent-%COMP%]:hover {\n      background: var(--gray-700);\n      color: var(--gray-900);\n    }\n\n    .icon-button.small[_ngcontent-%COMP%] {\n      width: 20px;\n      height: 20px;\n      font-size: 0.625rem;\n    }"] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StepComponent, [{
        type: Component,
        args: [{ selector: 'app-step', standalone: true, imports: [CommonModule, FormsModule, DropDownsModule], template: `
    <div class="step" [class.selected]="selected" [class.executing]="executing" (click)="onStepClick($event)">
      <div class="step-header">
        <div class="step-title">
          <i [class]="getStepIcon()" [style.color]="getStepIconColor()"></i>
          <span>{{ step.name }}</span>
        </div>
        <div class="step-actions">
          <button 
            class="icon-button small" 
            (click)="onDelete($event)" 
            title="Delete Step">
            <i class="fas fa-times"></i>
          </button>
        </div>
      </div>
      
      <div class="step-content">
        <kendo-combobox
          [data]="step.config.options"
          [value]="selectedOption"
          [placeholder]="'Select ' + step.config.name + '...'"
          textField="name"
          valueField="value"
          [valuePrimitive]="false"
          (valueChange)="onOptionChange($event)"
          class="step-dropdown">
        </kendo-combobox>
      </div>
      
      <div class="socket input" 
           (mousedown)="onSocketMouseDown($event, 'input')"
           (mouseenter)="onSocketMouseEnter($event, 'input')"
           (mouseleave)="onSocketMouseLeave($event)">
      </div>
      <div class="socket output" 
           (mousedown)="onSocketMouseDown($event, 'output')"
           (mouseenter)="onSocketMouseEnter($event, 'output')"
           (mouseleave)="onSocketMouseLeave($event)">
      </div>
    </div>
  `, styles: ["\n    .step {\n      width: 320px;\n      height: 140px;\n      position: relative;\n      background: var(--white-color);\n      border: 1px solid var(--gray-700);\n      border-radius: var(--border-radius);\n      transition: all var(--transition-time);\n      box-shadow: var(--shadow);\n      overflow: visible; /* Changed to visible so sockets can extend outside */\n    }\n\n    .step:hover {\n      box-shadow: 0 6px 16px rgba(0,0,0,0.2);\n      transform: translateY(-2px);\n    }\n\n    .step.selected {\n      border-color: var(--mj-blue);\n      box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.25);\n    }\n\n    .step.executing {\n      animation: pulse-border 1.5s infinite;\n      border-color: #28a745;\n      box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.3);\n    }\n\n    @keyframes pulse-border {\n      0% {\n        box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.3);\n      }\n      50% {\n        box-shadow: 0 0 0 6px rgba(40, 167, 69, 0.1);\n      }\n      100% {\n        box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.3);\n      }\n    }\n\n    .step-header {\n      padding: 0.75rem 1rem;\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      border-radius: calc(var(--border-radius) - 2px) calc(var(--border-radius) - 2px) 0 0;\n      overflow: hidden; /* Keep text from overflowing */\n    }\n\n    .step-title {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      font-weight: 600;\n      font-size: 0.875rem;\n      flex: 1;\n      overflow: hidden;\n    }\n    \n    .step-title span {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .step-actions {\n      display: flex;\n      gap: 0.25rem;\n    }\n\n    .step-content {\n      padding: 1rem;\n      height: calc(100% - 41px); /* Subtract header height */\n      display: flex;\n      align-items: center;\n    }\n\n    .step-dropdown {\n      width: 100%;\n      margin: 0.5rem 0;\n    }\n    \n    :host ::ng-deep .k-combobox {\n      width: 100%;\n      border-radius: 0.5rem;\n      border-color: var(--gray-700);\n      transition: all var(--transition-time);\n    }\n    \n    :host ::ng-deep .k-combobox:hover {\n      border-color: var(--mj-blue);\n    }\n    \n    :host ::ng-deep .k-combobox.k-focus {\n      border-color: var(--mj-blue);\n      box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.25);\n    }\n\n    .socket {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      width: 16px;\n      height: 16px;\n      border: 2px solid var(--white-color);\n      border-radius: 50%;\n      background: var(--gray-800);\n      z-index: 10;\n      box-shadow: var(--shadow);\n      cursor: crosshair;\n      transition: all var(--transition-time);\n    }\n\n    .socket.input {\n      left: -8px;\n    }\n\n    .socket.output {\n      right: -8px;\n    }\n\n    .socket:hover {\n      background: var(--mj-blue);\n      transform: translateY(-50%) scale(1.2);\n      box-shadow: 0 3px 6px rgba(0,0,0,0.3);\n    }\n    \n    .socket.connecting {\n      background: #28a745;\n      animation: pulse 1s infinite;\n    }\n    \n    @keyframes pulse {\n      0% { transform: translateY(-50%) scale(1); }\n      50% { transform: translateY(-50%) scale(1.3); }\n      100% { transform: translateY(-50%) scale(1); }\n    }\n\n    .icon-button {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 24px;\n      height: 24px;\n      border: none;\n      border-radius: 50%;\n      background: transparent;\n      color: var(--gray-800);\n      cursor: pointer;\n      transition: all var(--transition-time);\n      font-size: 0.75rem;\n    }\n\n    .icon-button:hover {\n      background: var(--gray-700);\n      color: var(--gray-900);\n    }\n\n    .icon-button.small {\n      width: 20px;\n      height: 20px;\n      font-size: 0.625rem;\n    }\n  "] }]
    }], null, { step: [{
            type: Input
        }], selected: [{
            type: Input
        }], executing: [{
            type: Input
        }], stepSelected: [{
            type: Output
        }], stepDeleted: [{
            type: Output
        }], stepUpdated: [{
            type: Output
        }], socketMouseDown: [{
            type: Output
        }], socketMouseEnter: [{
            type: Output
        }], socketMouseLeave: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(StepComponent, { className: "StepComponent", filePath: "src/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/step/step.component.ts", lineNumber: 221 }); })();
//# sourceMappingURL=step.component.js.map