import{Segment}from"@dna/analytics";import{client}from"@dna/constructor";import{RespondToViewport,WithProfiler}from"@dna/mixins";import styles from"@dna/styles";import{t}from"@dna/utils";import{LitElement,css,html,nothing,repeat}from"@lit";import{Task}from"@lit/task";const cacheKey="cached_best_sellers_search_suggestions";class DNASearchTerms extends WithProfiler(RespondToViewport(LitElement)){static properties={autocompleteTerms:{type:Array},hideTitle:{type:Boolean},showAutocompleteTerms:{type:Boolean},podId:{type:String},resultId:{type:String}};constructor(){super(),this.autocompleteTerms=[],this.hideTitle=!1,this.searchQuery="",this.showAutocompleteTerms=!1,this.podId="best_sellers_search_suggestions",this.resultId=""}connectedCallback(){super.connectedCallback(),document.addEventListener("dna:search:autocomplete",this._handleSearchAutocomplete)}disconnectedCallback(){document.removeEventListener("dna:search:autocomplete",this._handleSearchAutocomplete)}get searchTerms(){return this.autocompleteTerms&&this.autocompleteTerms.length>0?(this.hideTitle=!0,this.showAutocompleteTerms=!0,this.autocompleteTerms):(this.showAutocompleteTerms=!1,this._termsTask.value?.searchTerms)}_termsTask=new Task(this,{task:async()=>{try{const cachedData=sessionStorage.getItem(cacheKey);if(cachedData){const parsedData=JSON.parse(cachedData);return this.resultId=parsedData.resultId,parsedData}const response2=await client.getRecommendationTerms(this.podId,{numResults:4,section:"Search Suggestions"});return this.resultId=response2.resultId,sessionStorage.setItem(cacheKey,JSON.stringify(response2)),response2}catch(err){throw console.error("Error fetching results:",err),new Error(response)}},args:()=>[]});_handleSearchAutocomplete=event=>{this.autocompleteTerms=event.detail?.searchTerms||[],this.searchQuery=event.detail?.query};_getSearchUrl=term=>{const searchInputValue=encodeURIComponent(term);return`${window.location.origin}${Shopify.routes.root}search/?q=${searchInputValue}`};_trackSearchTermClicked=term=>{Segment.protect(()=>{Segment.track(Segment.CONSTANTS.EVENTS.SEARCH_SUGGESTED_TERM_CLICKED,{query:this.searchQuery,search_suggested_term_text:term})})};_renderHeader(){return this.autocompleteTerms&&this.autocompleteTerms.length>0&&this.isMobile?nothing:this.autocompleteTerms&&this.autocompleteTerms.length>0?html`<div class="trending-search-terms__header">${t("general.search.top_suggestions")}</div>`:html`<div class="trending-search-terms__header">${t("general.search.trending_terms")}</div>`}render(){return html`
      <div 
        class="trending-search-terms"
        ?data-cnstrc-autosuggest=${this.showAutocompleteTerms}
        ?data-cnstrc-recommendations=${!this.showAutocompleteTerms}
        data-cnstrc-recommendations-pod-id=${this.showAutocompleteTerms?nothing:`${this.podId}`}
        data-cnstrc-result-id=${this.showAutocompleteTerms?nothing:`${this.resultId}`}
        data-cnstrc-num-results=${this.showAutocompleteTerms?nothing:`${this.searchTerms?.length}`}
      >
      ${this._renderHeader()}
        ${this.searchTerms?html`
              <ul class="trending-search-terms__list">
                ${repeat(this.searchTerms,term=>term,(term,index)=>html`
                    <li 
                      data-cnstrc-item-section=${this.showAutocompleteTerms?"Search Suggestions":nothing} 
                      data-cnstrc-item=${this.showAutocompleteTerms?nothing:"recommendation"}
                      data-cnstrc-item-name=${term.id}
                    >
                      <a 
                        href="${this._getSearchUrl(term.id)}"
                        @click=${()=>{this._trackSearchTermClicked(term.id)}}
                      >${term.id}</a>
                    </li>
                  `)}
              </ul>
            `:nothing}
      </div>
    `}static styles=[styles.a11y,css`
      :host {
        margin-left: 40px;
      }
      .trending-search-terms__header {
        font: var( --dna-label-m-font);
        text-transform: uppercase;
        padding-bottom: 0;
        margin-top: var(--dna-space-4);
        letter-spacing: 2px;
      }
      @media screen and (min-width: 1025px) {
        .trending-search-terms__header {
          padding-bottom: var(--dna-space-2);
          margin-top: 0;
        }
      }
      .trending-search-terms__list {
        list-style-type: none;
        padding: 0;
        text-transform: capitalize;
      }
      .trending-search-terms__list li {
        margin-top: var(--dna-space-4);
      }
      .trending-search-terms__list li a {
        color: var(--dna-color-midnight);
        text-decoration: none;
      }
    }
    `]}customElements.define("dna-search-terms",DNASearchTerms);
//# sourceMappingURL=/cdn/shop/t/1163/assets/component-search-terms.js.map?v=65900203298816394601760566301