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 cacheKeyBase="cached_search_bar_reco",cacheKey=`${cacheKeyBase}|${window.Shopify?.country}`;class DNASearchProducts extends WithProfiler(RespondToViewport(LitElement)){static properties={autocompleteProducts:{type:Array},inputValue:{type:String},sectionHeading:{type:String},showRecentlyViewed:{type:Boolean},showSection:{type:Boolean},showAutocompleteProducts:{type:Boolean},podId:{type:String},resultId:{type:String}};constructor(){super(),this.autocompleteProducts=[],this.inputValue="",this.searchQuery="",this.sectionHeading="",this.showRecentlyViewed=!1,this.showSection=!1,this.showAutocompleteProducts=!1,this.podId="",this.resultId=""}get recommendedProducts(){return this.autocompleteProducts&&this.autocompleteProducts.length>0?(this.sectionHeading=t("general.search.top_suggestions"),this.showAutocompleteProducts=!0,this.autocompleteProducts):(this.showRecentlyViewed?this.sectionHeading=t("general.search.recently_viewed"):this.sectionHeading=t("general.search.popular_products"),this.showAutocompleteProducts=!1,this._productsTask.value)}get hideHeader(){return this.autocompleteProducts&&this.autocompleteProducts.length>0&&!this.isMobile}connectedCallback(){super.connectedCallback(),document.addEventListener("dna:search:autocomplete",this._handleSearchAutocomplete)}disconnectedCallback(){document.removeEventListener("dna:search:autocomplete",this._handleSearchAutocomplete)}_handleSearchAutocomplete=event=>{this.autocompleteProducts=event.detail?.products||[],this.searchQuery=event.detail?.query??"",this._trackProductSearchResults()};_trackProductSearchResults=()=>{Segment.protect(()=>{Segment.track(Segment.CONSTANTS.EVENTS.PRODUCTS_SEARCHED,{query:this.searchQuery,query_source:"header search",results:this.autocompleteProducts.length})})};_productsTask=new Task(this,{task:async()=>{try{const numResults=this.isMobile?6:5;let podId="search_bar_recent",response2=[];if(response2=await client.getRecommendationPod(podId,{numResults}),response2.products?.length>0)this.showRecentlyViewed=!0;else{const cachedData=sessionStorage.getItem(`${cacheKeyBase}|${window.Shopify?.country}`);if(cachedData){window.dispatchEvent(new CustomEvent("dna:search-products:loaded"));const parsedData=JSON.parse(cachedData);return this.podId=podId,this.resultId=parsedData.result_id,parsedData.products}podId="search_bar_reco",response2=await client.getRecommendationPod(podId,{numResults}),sessionStorage.setItem(cacheKey,JSON.stringify(response2))}return window.dispatchEvent(new CustomEvent("dna:search-products:loaded")),this.resultId=response2.result_id,this.podId=podId,response2.products}catch(err){throw console.error("Error fetching results:",err),new Error(response)}},args:()=>[]});render(){return html`
        ${this.recommendedProducts?html`
                <div class="trending-search-products__header ${this.hideHeader?"hidden":""}">${this.sectionHeading}</div>
              <div
                class="trending-search-products"
                ?data-cnstrc-autosuggest=${this.showAutocompleteProducts}
                ?data-cnstrc-recommendations=${!this.showAutocompleteProducts}
                data-cnstrc-recommendations-pod-id=${this.showAutocompleteProducts?nothing:`${this.podId}`}
                data-cnstrc-result-id=${this.showAutocompleteProducts?nothing:`${this.resultId}`}
                data-cnstrc-num-results=${this.showAutocompleteProducts?nothing:`${this.recommendedProducts.length}`}
              >
                ${repeat(this.recommendedProducts,product=>product,(product,index)=>html`
                    <dna-product-card
                      class="product-card__search"
                      .product=${product}
                      is-search="true"
                      show-carousel="false"
                      hide-wishlist-icon="true"
                      data-cnstrc-item-section="${this.showAutocompleteProducts?"Products":nothing}"
                      data-cnstrc-item="${this.showAutocompleteProducts?nothing:"recommendation"}"
                      data-cnstrc-item-id=${product?.id}
                      data-cnstrc-item-name=${product?.title}
                      data-cnstrc-item-variation-id=${product?.variants?.[0]?.id??nothing}
                      data-cnstrc-strategy-id=${product?.strategy_id??nothing}
                  ></dna-product-card>
                  `)}
              </div>
            `:nothing}
    `}static styles=[styles.a11y,css`
      .trending-search-products {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        margin: 0 -16px;
        gap: 1px;
        overflow: hidden;
        padding-bottom: 2px;
        padding-right: 2px;
      }
      @media screen and (min-width: 769px) {
        .trending-search-products {
          align-items: start;
          grid-auto-rows: auto;
          grid-template-columns: repeat(5, 1fr);
          margin: 0;
        }
      }
      .trending-search-products__header {
        font: var( --dna-label-m-font);
        text-transform: uppercase;
        padding-bottom: var(--dna-space-6);
        letter-spacing: 2px;
      }
      .product-card__search .badge-wrapper {
        height: 30px;
      }
    `]}customElements.define("dna-search-products",DNASearchProducts);
//# sourceMappingURL=/cdn/shop/t/1163/assets/component-search-products.js.map?v=98127195142394814121760566301