import { h, Env } from "@stencil/core";
import { insertStyles, search } from "../../utils/utils";
import SearchResult from "../ai12z-cta/components/SearchResult";
export class SearchPanel {
    constructor() {
        this.dataKey = Env.DATA_KEY || "";
        this.dataMode = Env.DATA_MODE || "prod";
        this.categorize = true;
        this.placeholder = "AI Search...";
        this.redirectUrl = "/search";
        this.query = "";
        this.searchResults = [];
        this.hideAllButtons = false;
        this.handleKeyDown = (event) => {
            // if (event.key === "Enter" && event.shiftKey) {
            //   console.log("Shift + Enter detected")
            //   // Prevent default behavior if needed
            // }
            if (event.key === "Enter" && !event.shiftKey) {
                event.preventDefault();
                this.handleFormSubmit(event);
                // console.log("Enter detected")
                // this.handleAskAI(event)
            }
        };
    }
    componentWillLoad() {
        insertStyles(`https://cdn.ai12z.net/assets/bot/v2/tailwind.min.css`, this.el);
    }
    async fetchSearchResults() {
        const response = await search(this.dataKey, this.dataMode, this.query);
        const newResults = response.docs ? [...response.docs] : [];
        this.searchResults = []; // Reset to trigger reactivity
        setTimeout(() => {
            this.searchResults = newResults;
        }, 0);
    }
    async handleInput(event) {
        const target = event.target;
        this.query = target.value;
        if (this.query.trim().length > 3) {
            this.fetchSearchResults();
        }
        else {
            this.searchResults = [];
            return;
        }
    }
    async handleFormSubmit(event) {
        event.preventDefault();
        // const response = await search(this.dataKey, this.dataMode, this.query)
        // console.log(response)
        const queryParams = new URLSearchParams({
            searchText: this.query,
            page: "1",
        }).toString();
        // Redirect to the '/about' page with query parameters
        window.location.href = `${this.redirectUrl}?${queryParams}`;
    }
    render() {
        var _a;
        return (h("div", { key: '4db66cb3af053593b6f49cfd279c62133b5bc59b', class: "flex flex-col rounded-2xl relative", id: "searchPanel" }, h("form", { key: 'c1b63bac4323c03d968d0a333a6263789065306f', class: "flex flex-col rounded-2xl p-2.5 search-container", onSubmit: event => this.handleFormSubmit(event), id: "searchForm" }, h("div", { key: '241e155dc1090bdf4cab2ff22208d56554cdf2aa', class: "flex" }, !this.hideAllButtons && (h("div", { key: '289e07a334a25d82e3318a411732471cb82c6f4a', class: "w-11/12 mt-1 search-input-container" }, h("label", { key: '19a47260434e8512a24475d240e831be5c55e185', htmlFor: "search-input", class: "sr-only" }, "Your message"), h("input", { key: 'a4e7ccc16b5e207eb4d8392916b295370b3f26d8', id: "search-input", class: `bg-inherit w-full outline-none resize-none ${((_a = this.searchResults) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "input-border" : ""} search-input`, ref: el => {
                this.searchInputElem = el;
                el === null || el === void 0 ? void 0 : el.focus();
            }, placeholder: this.placeholder, value: this.query, onInput: event => this.handleInput(event), onKeyDown: this.handleKeyDown, onFocus: () => {
                this.el.shadowRoot.querySelector("#searchPanel").classList.add("input-focus-color");
            }, onBlur: () => this.el.shadowRoot.querySelector("#searchPanel").classList.remove("input-focus-color") }))), h("div", { key: '388956b4c95944b10a114b7c7049e0a34d73169b', class: `icons flex items-center ${this.hideAllButtons ? "w-full" : "w-auto"}` }, h("span", { key: 'f80bf5faa8e37155b8ee157abdf38472eb7fa253', class: "w-full mic-icon" }, h("audio-recorder", { key: 'edb5905ea21aa922b9981dd950ab07643a1af54a', "component-type": "search", onStartRecord: _ev => {
                // console.log("test", ev)
                this.hideAllButtons = true;
            }, onStopRecord: _ev => {
                this.hideAllButtons = false;
            }, onSendTranscript: ev => {
                // console.log("ev", ev)
                setTimeout(() => {
                    // console.log("input", this.searchInputElem)
                    if (this.searchInputElem) {
                        this.searchInputElem.value = ev.detail;
                        this.query = ev.detail;
                        const inputElement = this.el.shadowRoot.querySelector("#search-input");
                        if (inputElement) {
                            const event = new Event("input", { bubbles: true });
                            Object.defineProperty(event, "target", { writable: false, value: inputElement });
                            inputElement.value = ev.detail;
                            this.handleInput(event); // Call manually
                            inputElement.dispatchEvent(event);
                        }
                    }
                }, 500);
            }, style: { width: "100%" } })), h("div", { key: '71f504092ad5d289f5013b113bcba7c98508754e', class: "search-icon" }, h("button", { key: 'cd7a2a00747106a42d4a6ee58525d6ace1eb79fc', id: "send-message-button", class: "text-white transition rounded-lg p-1.5 self-center search-btn-bg-color", onClick: event => this.handleFormSubmit(event), "aria-label": "Search" }, h("svg", { key: '9719aae24e90a64d202c6eacaf7d0512d304ed72', xmlns: "http://www.w3.org/2000/svg", class: "w-6 h-6", viewBox: "0 0 24 24" }, h("path", { key: '8ea5557a92714c394f103551dbe1cb3a1da8e1c7', fill: "currentColor", d: "M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 17 9.5 6.5 6.5 0 1 0 10.5 16a6.471 6.471 0 0 0 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-5 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 10.5 14z" })))))), this.searchResults && this.searchResults.length > 0 && (h("div", { key: '4e9ae924150fb065d2e703f09df47d15f7b782be', class: "rounded-b-2xl overflow-hidden search-results" }, this.categorize && h("ai12z-category", { key: 'ee52f905f7e06abd6f5b55f2680fb71d4b98ef27', categoryList: this.searchResults, linkTarget: "_blank" }), !this.categorize && h(SearchResult, { key: '4a03deb24440e25d5532fb038565aa4d89398385', results: this.searchResults }))))));
    }
    static get is() { return "ai12z-search-panel"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ai12z-search-panel.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ai12z-search-panel.css"]
        };
    }
    static get properties() {
        return {
            "dataKey": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "data-key",
                "defaultValue": "Env.DATA_KEY || \"\""
            },
            "dataMode": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "data-mode",
                "defaultValue": "Env.DATA_MODE || \"prod\""
            },
            "categorize": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "categorize",
                "defaultValue": "true"
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "placeholder",
                "defaultValue": "\"AI Search...\""
            },
            "redirectUrl": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "redirect-url",
                "defaultValue": "\"/search\""
            }
        };
    }
    static get states() {
        return {
            "query": {},
            "searchResults": {},
            "hideAllButtons": {}
        };
    }
    static get elementRef() { return "el"; }
}
