import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { c as createStore } from './index4.js';
import { s as search } from './search.js';

// Read more about how stencil stores work here: https://stenciljs.com/docs/stencil-store
const { state, onChange } = createStore({
    searchValue: '',
    autocompleteSuggestions: {},
    requestAbortController: new AbortController(),
});

const pnMarketwebSiteheaderSearchCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}.siteheader-search a{display:none}@media screen and (min-width: 48em){.siteheader-search a{display:block}}.siteheader-search pn-search-field>.input-container button{background:#ffffff}.siteheader-search pn-search-field.button-icon pn-button,.siteheader-search pn-button{display:inline-flex}.siteheader-search pn-search-field.button-icon pn-button button,.siteheader-search pn-button button{align-self:center;padding:0;height:2.3em;width:2.4em;line-height:0;min-height:unset;min-width:initial}.siteheader-search pn-search-field.button-icon pn-button pn-icon,.siteheader-search pn-button pn-icon{margin-left:0}.siteheader-search pn-search-field.button-icon pn-button .pn-button-tooltip,.siteheader-search pn-button .pn-button-tooltip{line-height:initial !important}.siteheader-search form{justify-content:flex-end;align-items:stretch;width:auto;flex:none;display:flex;padding:0;margin:0 0 0 0.4rem;position:relative;flex-direction:column}@media screen and (min-width: 60em){.siteheader-search form{margin-right:1.6rem}}.siteheader-search form pn-search-field{min-width:13.5em}.siteheader-search form pn-search-field .input-container{align-self:center}.siteheader-search form pn-search-field input{height:auto;min-height:1em;padding:0.6em 0.75em}";
const PnMarketwebSiteheaderSearchStyle0 = pnMarketwebSiteheaderSearchCss;

const PnMarketwebSiteheaderSearch = /*@__PURE__*/ proxyCustomElement(class PnMarketwebSiteheaderSearch extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.i18n = undefined;
        this.showOnlyLink = false;
        this.hideSearch = false;
        this.language = null;
        this.siteid = null;
        this.search = {};
        this.primary = false;
        this.icononly = true;
        this.autoCompleteOptions = [];
    }
    get hostElement() { return this; }
    onSearchValueUpdate() {
        this.getAutocomplete(state.searchValue);
    }
    async getAutocomplete(prefix) {
        if (!this.search.AutocompleteEndpoint || prefix.length < 2) {
            this.autoCompleteOptions = [];
            return;
        }
        if (state.autocompleteSuggestions[prefix]) {
            this.setAutocompleteSuggestions(state.autocompleteSuggestions[prefix]);
            return;
        }
        let autocompleteUrl = `${this.search.AutocompleteEndpoint}?prefix=${prefix}&size=10`;
        if (this.language || this.siteid) {
            autocompleteUrl += `&tags=`;
            if (this.language) {
                autocompleteUrl += `language:${this.language}`;
            }
            if (this.language && this.siteid) {
                autocompleteUrl += `,`;
            }
            if (this.siteid) {
                autocompleteUrl += `siteid:${this.siteid}`;
            }
        }
        const req = await fetch(autocompleteUrl, { signal: state.requestAbortController.signal }).catch(e => {
            console.warn('Unable to fetch autocomplete suggestions', e);
        });
        if (!req) {
            return;
        }
        const data = await req.json();
        if (!data || !data.hits || !data.hits.length) {
            return;
        }
        const suggestions = data.hits
            .filter(item => item.type === 'editorial')
            .map(item => {
            return item.query;
        });
        // Store query in store
        state.autocompleteSuggestions[prefix] = suggestions;
        this.setAutocompleteSuggestions(suggestions);
    }
    setAutocompleteSuggestions(suggestions) {
        if (typeof suggestions !== 'object' || typeof suggestions.length !== 'number' || suggestions.length === 0) {
            return;
        }
        this.autoCompleteOptions = suggestions;
    }
    componentWillLoad() {
        onChange('searchValue', () => {
            this.onSearchValueUpdate();
        });
    }
    componentDidRender() {
        const inputSearchElm = this.hostElement.querySelector('pn-search-field input:not([list])');
        if (inputSearchElm && this.search.AutocompleteEndpoint) {
            inputSearchElm.setAttribute('list', 'siteheader-search-autocomplete');
        }
    }
    render() {
        if (!this.search.formActionUrl || this.hideSearch) {
            return;
        }
        const autocompleteAttribute = this.search.AutocompleteEndpoint ? { list: 'siteheader-search-autocomplete' } : {};
        return (h("div", { class: "siteheader-search" }, this.showOnlyLink ? (h("pn-button", { href: this.search.formActionUrl, appearance: "light", icon: search, tooltip: this.i18n.searchlabel })) : (h("form", { method: "get", action: this.search.formActionUrl, role: "search" }, h("pn-search-field", { ...autocompleteAttribute, label: this.i18n.searchlabel, name: "q", button: this.icononly ? 'icon' : null, "button-label": 'Search', placeholder: this.i18n.searchplaceholder, onUpdate: (e) => {
                state.searchValue = e.detail;
            }, onSearch: () => {
                const form = this.hostElement.querySelector('form');
                if (form) {
                    form.submit();
                }
            } }), this.primary && this.search.AutocompleteEndpoint ? (h("datalist", { id: "siteheader-search-autocomplete" }, this.autoCompleteOptions.map(item => (h("option", null, item))))) : null))));
    }
    static get style() { return PnMarketwebSiteheaderSearchStyle0; }
}, [0, "pn-marketweb-siteheader-search", {
        "i18n": [8, "i-1-8n"],
        "showOnlyLink": [1028, "show-only-link"],
        "hideSearch": [1028, "hide-search"],
        "language": [1537],
        "siteid": [1],
        "search": [1040],
        "primary": [4],
        "icononly": [4],
        "autoCompleteOptions": [32]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-marketweb-siteheader-search"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-marketweb-siteheader-search":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnMarketwebSiteheaderSearch);
            }
            break;
    } });
}

export { PnMarketwebSiteheaderSearch as P, defineCustomElement as d };

//# sourceMappingURL=pn-marketweb-siteheader-search2.js.map