import { Component, ElementRef, HostListener, Input, ViewChild, ViewEncapsulation } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { PropertiesService } from '../../../common-property-panel/properties/properties.service';
import { WidgetsService } from '../widgets.service';
import { QrCode } from '../../../forms/page/widgets/qr-code';
import { FormBuilderMasterService } from '../../../sculptor/form-builder-master/form-builder-master.service';
import { WidgetDropListComponent } from '../../../sculptor/form-builder-master/canvas/widget-drop-list/widget-drop-list.component';
import * as i0 from "@angular/core";
import * as i1 from "../../../common-property-panel/properties/properties.service";
import * as i2 from "../widgets.service";
import * as i3 from "../../../sculptor/form-builder-master/form-builder-master.service";
import * as i4 from "../../../sculptor/form-builder-master/canvas/widget-drop-list/widget-drop-list.component";
const _c0 = ["inputField"];
function QrCodeComponent_ng_container_0_ng_container_7_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵelement(1, "mat-icon", 19);
    i0.ɵɵelementContainerEnd();
} }
function QrCodeComponent_ng_container_0_button_12_Template(rf, ctx) { if (rf & 1) {
    const _r6 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 20);
    i0.ɵɵlistener("click", function QrCodeComponent_ng_container_0_button_12_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r5 = i0.ɵɵnextContext(2); return ctx_r5.onClickEditor(); });
    i0.ɵɵelement(1, "mat-icon", 21);
    i0.ɵɵelementEnd();
} }
function QrCodeComponent_ng_container_0_lib_confirmation_button_20_Template(rf, ctx) { if (rf & 1) {
    const _r8 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "lib-confirmation-button", 22);
    i0.ɵɵlistener("click", function QrCodeComponent_ng_container_0_lib_confirmation_button_20_Template_lib_confirmation_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(2); return ctx_r7.delete(); });
    i0.ɵɵelementEnd();
} }
function QrCodeComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
    const _r10 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵelementStart(1, "div", 1);
    i0.ɵɵlistener("click", function QrCodeComponent_ng_container_0_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(); return ctx_r9.onWidgetClick(); });
    i0.ɵɵelementStart(2, "div", 2);
    i0.ɵɵelementStart(3, "div", 3);
    i0.ɵɵelementStart(4, "form", 4);
    i0.ɵɵelementStart(5, "textarea", 5, 6);
    i0.ɵɵlistener("ngModelChange", function QrCodeComponent_ng_container_0_Template_textarea_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r11 = i0.ɵɵnextContext(); return ctx_r11.widget.prompt = $event; })("mousedown", function QrCodeComponent_ng_container_0_Template_textarea_mousedown_5_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r12 = i0.ɵɵnextContext(); return ctx_r12.preventFocus($event); })("focus", function QrCodeComponent_ng_container_0_Template_textarea_focus_5_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r13 = i0.ɵɵnextContext(); return ctx_r13.onFocus($event); })("keydown.enter", function QrCodeComponent_ng_container_0_Template_textarea_keydown_enter_5_listener() { i0.ɵɵrestoreView(_r10); const _r1 = i0.ɵɵreference(6); const ctx_r14 = i0.ɵɵnextContext(); ctx_r14.updateIdentifier(); return _r1.blur(); })("blur", function QrCodeComponent_ng_container_0_Template_textarea_blur_5_listener() { i0.ɵɵrestoreView(_r10); const ctx_r15 = i0.ɵɵnextContext(); return ctx_r15.updateIdentifier(); })("dblclick", function QrCodeComponent_ng_container_0_Template_textarea_dblclick_5_listener() { i0.ɵɵrestoreView(_r10); const ctx_r16 = i0.ɵɵnextContext(); return ctx_r16.onDoubleClick(); });
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(7, QrCodeComponent_ng_container_0_ng_container_7_Template, 2, 0, "ng-container", 0);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(8, "div", 7);
    i0.ɵɵelementStart(9, "div", 8);
    i0.ɵɵelement(10, "mat-icon", 9);
    i0.ɵɵelement(11, "input", 10);
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(12, QrCodeComponent_ng_container_0_button_12_Template, 2, 0, "button", 11);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(13, "div", 12);
    i0.ɵɵelementStart(14, "button", 13);
    i0.ɵɵlistener("click", function QrCodeComponent_ng_container_0_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r10); const ctx_r17 = i0.ɵɵnextContext(); return ctx_r17.copyWidget(ctx_r17.widget); });
    i0.ɵɵelement(15, "mat-icon", 14);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(16, "button", 15);
    i0.ɵɵlistener("click", function QrCodeComponent_ng_container_0_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r10); const ctx_r18 = i0.ɵɵnextContext(); return ctx_r18.pasteWidget(); });
    i0.ɵɵelement(17, "mat-icon", 16);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(18, "button", 13);
    i0.ɵɵlistener("click", function QrCodeComponent_ng_container_0_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r10); const ctx_r19 = i0.ɵɵnextContext(); return ctx_r19.confirmbutton(); });
    i0.ɵɵelement(19, "mat-icon", 17);
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(20, QrCodeComponent_ng_container_0_lib_confirmation_button_20_Template, 1, 0, "lib-confirmation-button", 18);
    i0.ɵɵelementEnd();
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance(1);
    i0.ɵɵclassProp("selected-widget", ctx_r0.widget.widgetSelect);
    i0.ɵɵproperty("formGroup", ctx_r0.group)("id", ctx_r0.widget.id);
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("formGroupName", ctx_r0.widget.id + "_group");
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("id", ctx_r0.getTextAreaId())("ngModel", ctx_r0.widget.prompt)("formControlName", ctx_r0.widget.id + "_prompt")("readonly", !ctx_r0.isEditable);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngIf", ctx_r0.widget.isHidden);
    i0.ɵɵadvance(4);
    i0.ɵɵproperty("placeholder", ctx_r0.widget.placeholder ? ctx_r0.widget.placeholder : "Scan QR code")("formControlName", ctx_r0.widget.id);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", !ctx_r0.isEditable);
    i0.ɵɵadvance(4);
    i0.ɵɵproperty("disabled", ctx_r0.isPasteInProgress);
    i0.ɵɵadvance(4);
    i0.ɵɵproperty("ngIf", ctx_r0.showConfirmation);
} }
export class QrCodeComponent {
    // --------------------------------------------
    /**
     * constructor
     *
     * @param _propertiesService
     */
    constructor(_propertiesService, _widgetProperties, _formBuilderMasterService, _widgetDropListComponent) {
        this._propertiesService = _propertiesService;
        this._widgetProperties = _widgetProperties;
        this._formBuilderMasterService = _formBuilderMasterService;
        this._widgetDropListComponent = _widgetDropListComponent;
        this.showConfirmation = false;
        this.isPasteInProgress = false;
        this.isEditable = false;
    }
    // -----------------------------------------------------------------------------------------------------
    // @ Lifecycle hooks start
    // -----------------------------------------------------------------------------------------------------
    /**
     * on init
     */
    ngOnInit() {
    }
    ngAfterViewInit() {
        const textareaElement = document.getElementById(this.getTextAreaId());
        textareaElement.style.height = "20px";
        textareaElement.style.height = `${textareaElement.scrollHeight}px`;
        // const rows = (this.widget.prompt.length / textareaElement.cols) - 1;
        // rows <= 1 ? textareaElement.rows = 1 : textareaElement.rows = rows;
        textareaElement.addEventListener("keyup", e => {
            const element = e.target;
            textareaElement.style.height = "20px";
            textareaElement.style.height = `${element.scrollHeight}px`;
        });
    }
    // -----------------------------------------------------------------------------------------------------
    // @ Lifecycle hooks end
    // -----------------------------------------------------------------------------------------------------
    /**
     * to emit widgetClickEvent to show properties of selected widget
     */
    onWidgetClick() {
        this._propertiesService.widgetClickEvent(this.widget);
    }
    async updateIdentifier() {
        // Clear any existing timeout to debounce the function calls
        if (this.debounceTimeout) {
            clearTimeout(this.debounceTimeout);
        }
        // Set a new timeout
        this.debounceTimeout = setTimeout(async () => {
            try {
                const newIdentifier = this.widget.identifier.replace(/[_0-9]/g, '');
                // Do not clean the prompt by removing digits or replacing characters
                const promptCleaned = this.widget.prompt; // No modifications here
                if (this.widget.prompt !== newIdentifier) {
                    // Directly add a unique identifier without validating
                    if (!this.widget.identifier.includes(promptCleaned)) {
                        await this._widgetDropListComponent.addUniqueIdentifier(this.widget);
                    }
                }
                this.isEditable = false; // Set back to read-only after updating
            }
            catch (error) {
                console.error("Error updating identifier:", error); // Log the error for debugging
            }
        }, 300); // Set the debounce timeout interval to 300ms (adjust as necessary)
    }
    /**
   * to emit widgetDeleteEvent to Delete Widget
   */
    delete() {
        this._widgetProperties.widgetDeleteEvent(this.widget);
        this._formBuilderMasterService.triggerLocalstorageFormUpdate();
        this._formBuilderMasterService.triggersetDropViewFormUpdate();
    }
    onClickEditor() {
        this._widgetDropListComponent.toggleEditor(this.widget);
    }
    confirmbutton() {
        this.showConfirmation = !this.showConfirmation;
    }
    onMouseEnter() {
        this.showConfirmation = false;
    }
    copyWidget() {
        this._widgetProperties.widgetCopyEvent(this.widget);
    }
    cutWidget() {
        this._widgetProperties.widgetCutEvent(this.widget);
    }
    pasteWidget() {
        this.isPasteInProgress = true;
        // Call the widget paste event
        this._propertiesService.widgetClickEvent(this.widget);
        this._widgetProperties.widgetPasteEvent();
        // Set a timeout to reset the flag after a certain period
        setTimeout(() => {
            // Reset the flag after a certain period (e.g., 500 milliseconds)
            this.isPasteInProgress = false;
        }, 500); // Adjust the timeout duration as needed
    }
    calculateHeight() {
        const promptLength = this.getPromptLength();
        const lineHeight = 15;
        const minHeight = 10;
        const additionalHeight = Math.ceil(promptLength / 30) * lineHeight;
        const totalHeight = minHeight + additionalHeight;
        return totalHeight;
    }
    getPromptLength() {
        return this.widget.prompt ? this.widget.prompt.length : 0;
    }
    onDoubleClick(event) {
        if (!this.isEditable) {
            this.toggleEditable();
        }
    }
    toggleEditable() {
        this.isEditable = !this.isEditable;
        if (this.isEditable) {
            setTimeout(() => this.inputField.nativeElement.focus(), 0); // Focus the input field when it becomes editable
        }
    }
    // Prevent focus on single click
    preventFocus(event) {
        if (!this.isEditable) {
            event.preventDefault();
        }
    }
    // Handle focus event
    onFocus(event) {
        if (!this.isEditable) {
            event.target.blur();
        }
        this.inputField.nativeElement.select();
    }
    getTextAreaId() {
        const promptId = `prompt-widget.${this.widget.id}`;
        return promptId;
    }
}
QrCodeComponent.ɵfac = function QrCodeComponent_Factory(t) { return new (t || QrCodeComponent)(i0.ɵɵdirectiveInject(i1.PropertiesService), i0.ɵɵdirectiveInject(i2.WidgetsService), i0.ɵɵdirectiveInject(i3.FormBuilderMasterService), i0.ɵɵdirectiveInject(i4.WidgetDropListComponent)); };
QrCodeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QrCodeComponent, selectors: [["lib-qr-code"]], viewQuery: function QrCodeComponent_Query(rf, ctx) { if (rf & 1) {
        i0.ɵɵviewQuery(_c0, 5);
    } if (rf & 2) {
        let _t;
        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputField = _t.first);
    } }, hostBindings: function QrCodeComponent_HostBindings(rf, ctx) { if (rf & 1) {
        i0.ɵɵlistener("mouseenter", function QrCodeComponent_mouseenter_HostBindingHandler() { return ctx.onMouseEnter(); });
    } }, inputs: { widget: "widget", group: "group" }, decls: 1, vars: 1, consts: [[4, "ngIf"], [1, "text-widget", 3, "formGroup", "id", "click"], [1, "flex", "gap-2", "justify-between", "box-border"], [1, "flex", "gap-2", "items-center", "box-border"], [1, "prompt", "box-border", 3, "formGroupName"], ["matInput", "", "matTooltip", "Double Click to Edit", 1, "prompt-text", "box-border", 3, "id", "ngModel", "formControlName", "readonly", "ngModelChange", "mousedown", "focus", "keydown.enter", "blur", "dblclick"], ["inputField", ""], [1, "form-field-input"], [1, "icon-input-container"], ["svgIcon", "axo_sculptor_qrcode", 1, "icon", "relative"], ["readonly", "true", 3, "placeholder", "formControlName"], ["class", "find-help", 3, "click", 4, "ngIf"], [1, "tooltip-container"], [1, "clipboard-icon", 3, "click"], ["svgIcon", "axo_sculptor_copy", "matTooltip", "Copy", 1, "h-4", "min-h-4", "w-4", "min-w-4"], [1, "clipboard-icon", 3, "disabled", "click"], ["svgIcon", "axo_sculptor_paste", "matTooltip", "Paste", 1, "h-4", "min-h-4", "w-4", "min-w-4"], ["svgIcon", "axo_sculptor_delete", "matTooltip", "Delete", 1, "h-4", "min-h-4", "w-4", "min-w-4"], [3, "click", 4, "ngIf"], ["svgIcon", "axo_sculptor_close_eye", 1, "h-4", "w-4", "min-w-4", "min-h-4"], [1, "find-help", 3, "click"], ["svgIcon", "axo_sculptor_help-text", "matTooltip", "Help", 1, "h-4", "min-h-4", "w-4", "min-w-4"], [3, "click"]], template: function QrCodeComponent_Template(rf, ctx) { if (rf & 1) {
        i0.ɵɵtemplate(0, QrCodeComponent_ng_container_0_Template, 21, 15, "ng-container", 0);
    } if (rf & 2) {
        i0.ɵɵproperty("ngIf", ctx.widget);
    } }, styles: ["lib-qr-code{width:100%}lib-qr-code .text-widget{background:#ffffff;border:1px solid #CED0DD;padding:1rem;border-radius:10px;padding-top:10px;height:fit-content;box-sizing:border-box}lib-qr-code .text-widget:hover{background-color:#eaeaea}lib-qr-code .text-widget .prompt-text{color:#000;font-size:14px!important;font-style:normal;font-weight:500;line-height:130%;font-family:Noto Sans,sans-serif;width:96%;resize:none;margin:0;padding:3px 3px 0}lib-qr-code .text-widget .form-field-input{border:none;border-radius:10px}lib-qr-code .text-widget .form-field-input input{font-family:Noto Sans,sans-serif;height:38px;box-sizing:border-box;width:100%;cursor:pointer;margin-left:5px}lib-qr-code .text-widget .icon-input-container input::placeholder{font-size:14px;font-weight:400;color:#575757}lib-qr-code .text-widget .icon-input-container{border:1px solid #bed0df!important;border-radius:10px;align-self:flex-end;position:relative;display:flex;flex-flow:row;align-items:center;margin:.5rem 0 0;padding:5px 10px;height:48px;width:100%}lib-qr-code .text-widget .mat-icon{height:30px;width:30px}.text-widget div div,.text-widget div div form,.text-widget div div form input{width:100%}.text-widget div div form{line-height:13px!important}.text-widget div div form input{height:16px!important}.text-widget div div form :focus{outline:1px solid #9cbbe9;border-radius:4px;background-color:#fff;width:96%}\n"], encapsulation: 2 });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QrCodeComponent, [{
        type: Component,
        args: [{ selector: 'lib-qr-code', encapsulation: ViewEncapsulation.None, template: "<!-- QR Code widget -->\n<ng-container *ngIf=\"widget\">\n    <div [formGroup]=\"group\" class=\"text-widget\" [id]=\"widget.id\" [class.selected-widget]=\"widget.widgetSelect\" (click)=\"onWidgetClick()\">\n        <div class=\"flex gap-2 justify-between box-border\">\n            <div class=\"flex gap-2 items-center box-border\">\n                <!-- <mat-icon svgIcon=\"axo_sculptor_qrcode\" class=\"h-4 w-4 min-w-4 min-h-4\"></mat-icon> -->\n                <form [formGroupName]=\"this.widget.id + '_group'\" class=\"prompt box-border\" >\n                    <textarea matInput [id]=\"getTextAreaId()\" [(ngModel)]='widget.prompt' [formControlName]=\"widget.id + '_prompt'\"  #inputField (mousedown)=\"preventFocus($event)\"\n                    (focus)=\"onFocus($event)\" (keydown.enter)=\"updateIdentifier(); inputField.blur()\" (blur)=\"updateIdentifier()\"  class=\"prompt-text box-border\" [readonly]=\"!isEditable\"\n                    (dblclick)=\"onDoubleClick()\" matTooltip=\"Double Click to Edit\"></textarea> \n                </form>\n            </div>\n            <ng-container *ngIf=\"widget.isHidden\">\n              <mat-icon svgIcon=\"axo_sculptor_close_eye\" class=\"h-4 w-4 min-w-4 min-h-4\"></mat-icon>\n            </ng-container>\n        </div>\n\n      <div class ='form-field-input'>\n        <div class=\"icon-input-container\">\n          <mat-icon svgIcon=\"axo_sculptor_qrcode\" class=\"icon relative\"></mat-icon>\n          <input [placeholder]=\"widget.placeholder?widget.placeholder:'Scan QR code'\" readonly=true\n          [formControlName]=\"widget.id\" />\n        </div>\n      </div>\n      <button *ngIf=\"!isEditable\" class=\"find-help\" (click)=\"onClickEditor()\"> <mat-icon svgIcon=\"axo_sculptor_help-text\" class=\"h-4 min-h-4 w-4 min-w-4\" matTooltip=\"Help\"></mat-icon></button>\n    </div>\n    <div class=\"tooltip-container\">\n      <!-- <button class=\"find-help\" (click)=\"onClickEditor()\"> <mat-icon svgIcon=\"axo_sculptor_help-text\" class=\"h-4 min-h-4 w-4 min-w-4\" matTooltip=\"Help\"></mat-icon></button> -->\n      <!-- <button class=\"clipboard-icon\" (click)=\"cutWidget(widget)\"> <mat-icon svgIcon=\"axo_sculptor_cut\" matTooltip=\"Cut\" class=\"h-4 min-h-4 w-4 min-w-4\"></mat-icon></button> -->\n      <button class=\"clipboard-icon\" (click)=\"copyWidget(widget)\"> <mat-icon svgIcon=\"axo_sculptor_copy\" matTooltip=\"Copy\" class=\"h-4 min-h-4 w-4 min-w-4\"></mat-icon></button>\n      <button class=\"clipboard-icon\" (click)=\"pasteWidget()\" [disabled]=\"isPasteInProgress\"> <mat-icon svgIcon=\"axo_sculptor_paste\" matTooltip=\"Paste\" class=\"h-4 min-h-4 w-4 min-w-4\"></mat-icon></button>\n      <button class=\"clipboard-icon\" (click)=\"confirmbutton()\"><mat-icon svgIcon=\"axo_sculptor_delete\" matTooltip=\"Delete\" class=\"h-4 min-h-4 w-4 min-w-4\"></mat-icon>\n      </button>\n      <lib-confirmation-button *ngIf=\"showConfirmation\" (click)=\"delete()\"> </lib-confirmation-button>\n\n    </div>\n\n  </ng-container>\n", styles: ["lib-qr-code{width:100%}lib-qr-code .text-widget{background:#ffffff;border:1px solid #CED0DD;padding:1rem;border-radius:10px;padding-top:10px;height:fit-content;box-sizing:border-box}lib-qr-code .text-widget:hover{background-color:#eaeaea}lib-qr-code .text-widget .prompt-text{color:#000;font-size:14px!important;font-style:normal;font-weight:500;line-height:130%;font-family:Noto Sans,sans-serif;width:96%;resize:none;margin:0;padding:3px 3px 0}lib-qr-code .text-widget .form-field-input{border:none;border-radius:10px}lib-qr-code .text-widget .form-field-input input{font-family:Noto Sans,sans-serif;height:38px;box-sizing:border-box;width:100%;cursor:pointer;margin-left:5px}lib-qr-code .text-widget .icon-input-container input::placeholder{font-size:14px;font-weight:400;color:#575757}lib-qr-code .text-widget .icon-input-container{border:1px solid #bed0df!important;border-radius:10px;align-self:flex-end;position:relative;display:flex;flex-flow:row;align-items:center;margin:.5rem 0 0;padding:5px 10px;height:48px;width:100%}lib-qr-code .text-widget .mat-icon{height:30px;width:30px}.text-widget div div,.text-widget div div form,.text-widget div div form input{width:100%}.text-widget div div form{line-height:13px!important}.text-widget div div form input{height:16px!important}.text-widget div div form :focus{outline:1px solid #9cbbe9;border-radius:4px;background-color:#fff;width:96%}\n"] }]
    }], function () { return [{ type: i1.PropertiesService }, { type: i2.WidgetsService }, { type: i3.FormBuilderMasterService }, { type: i4.WidgetDropListComponent }]; }, { widget: [{
            type: Input
        }], group: [{
            type: Input
        }], inputField: [{
            type: ViewChild,
            args: ['inputField']
        }], onMouseEnter: [{
            type: HostListener,
            args: ['mouseenter']
        }] }); })();
//# sourceMappingURL=data:application/json;base64, 