import { r as registerInstance, E as Env, h, d as getElement } from './index-BNpVu1WU.js';
import { e as insertStyles, P as search } from './utils-DK_Yhmpx.js';
import { S as SearchResult } from './SearchResult-zLaEhc3L.js';

const ai12zSearchPanelCss = () => `:host{display:block;width:100%;font-family:var(--ai12z-font-family);font-size:var(--ai12z-font-size)}.input-focus-color{border:1px solid var(--ai12z-search-panel-focus-color)}.search-btn-bg-color{background-color:var(--ai12z-search-panel-button-bgcolor)}.input-border{border-bottom:1px solid var(--ai12z-search-panel-input-border-color)}.search-container{background-color:var(--ai12z-search-panel-bg)}.search-icon svg{width:20px;height:20px;color:var(--ai12z-search-panel-icon-color);}.search-input::-moz-placeholder{color:#999}.search-input::placeholder{color:#999}.search-results{width:100%;text-align:left}.cta-search-results{border-top-width:1px;border-bottom-width:0px;border-color:rgb(243 244 246)}.cta-search-results-list{position:relative;padding-bottom:1.25rem;padding-top:1.25rem}.cta-search-results-list:hover{background-color:var(--ai12z-hover-bg-color)}.cta-search-container{margin-left:auto;margin-right:auto;display:flex;max-width:56rem;justify-content:space-between;-moz-column-gap:1.5rem;column-gap:1.5rem}.cta-search-container-two{display:flex;min-width:0px;-moz-column-gap:1rem;column-gap:1rem}.cta-search-container-three{min-width:0px;flex:1 1 auto}.cta-search-text{font-weight:600;line-height:1.5rem;font-size:var(--ai12z-search-result-title-font-size);color:var(--ai12z-search-result-title-color)}.cta-search-text-position{position:absolute;left:0px;right:0px;top:-1px;bottom:0px}.cta-search-description{margin-top:0.25rem;display:flex;font-size:var(--ai12z-search-result-description-font-size);line-height:1rem;line-height:1.25rem;color:var(--ai12z-search-result-description-color)}.cta-search-list-arrow{display:flex;align-items:center;flex-shrink:0;-moz-column-gap:1rem;column-gap:1rem}.custom-icon-width{width:4rem}.results-icon svg{width:1.5rem;height:1.5rem}`;

const SearchPanel = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        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 }))))));
    }
    get el() { return getElement(this); }
};
SearchPanel.style = ai12zSearchPanelCss();

export { SearchPanel as ai12z_search_panel };
