import{E as d}from"./events.js";import{e as l}from"./emitEvent.js";const o=(s="#333")=>`
    <svg
        xmlns="http://www.w3.org/2000/svg"
        height="24px"
        viewBox="0 0 24 24"
        width="24px"
        fill="${s}"
        data-bb-selector="chevron-icon"
    >
        <path d="M24 24H0V0h24v24z" fill="none" opacity=".87"/>
        <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"/>
    </svg>
`;class c extends HTMLElement{constructor(){super(),this.version=this.dataset.version,this.accordion=this.dataset.accordion,this.configuredBundleId=Number.parseInt(this.dataset.configuredBundleId,10),this.variantId=Number.parseInt(this.dataset.variantId,10),this.frequency=this.dataset.frequency,this.showCompareAtPrice=window.eight.bundleBuilder.storefront.cartEngine.boxSettings.show_compare_at,this.lineItem=window.eight.bundleBuilder.storefront.cartEngine.bundles.find(t=>t.configuredBundleId===this.configuredBundleId),this.lineItem||(this.lineItem=window.eight.bundleBuilder.storefront.cartEngine.bundles.find(t=>this.variantId&&t.lineItem.variant_id===this.variantId)),this.displayAsAccordion=this.accordion==="true",this.qtyTranslation=window.eight.bundleBuilder.storefront.cartEngine.getTranslation("QTY: {{ qty }}"),this.frequencyTranslations={day:window.eight.bundleBuilder.storefront.cartEngine.getTranslation("Every day"),days:window.eight.bundleBuilder.storefront.cartEngine.getTranslation("Every {{ amount }} days"),week:window.eight.bundleBuilder.storefront.cartEngine.getTranslation("Every week"),weeks:window.eight.bundleBuilder.storefront.cartEngine.getTranslation("Every {{ amount }} weeks"),month:window.eight.bundleBuilder.storefront.cartEngine.getTranslation("Every month"),months:window.eight.bundleBuilder.storefront.cartEngine.getTranslation("Every {{ amount }} months")};const e=window.eight.bundleBuilder.storefront.cartEngine.getTranslation("Duplicate"),i=window.eight.bundleBuilder.storefront.cartEngine.getTranslation("Remove");this.actions={duplicate:{displayedText:e,event:d["ACTION:DUPLICATE"],details:{configuredBundleId:this.configuredBundleId,variantId:this.variantId},allowedVersion:["2"]},remove:{displayedText:i,event:d["ACTION:REMOVE"],details:{configuredBundleId:this.configuredBundleId,variantId:this.variantId},allowedVersion:["1","2"]}}}connectedCallback(){this.init()}qtyLabel(e){return this.qtyTranslation.replace(/{{\s*qty\s*}}/,e.count.toFixed(0))}renderContents(){var a;const e="items"in this.lineItem?this.lineItem.items:null,i=(e||[]).map(n=>`
                <div data-bb-selector="line-item-card-contents-item" role="listitem">
                    <div data-bb-selector="line-item-card-contents-thumbnail">
                        <img data-bb-selector="line-item-card-contents-thumbnail-image" src="${n.image}" alt="${n.title}" aria-label="Item image" />
                    </div>
                    <div data-bb-selector="line-item-card-contents-details">
                        <div data-bb-selector="line-item-card-contents-qty" aria-label="Item quantity">${this.qtyLabel(n)}</div>
                        <h3 data-bb-selector="line-item-card-contents-details-title" aria-label="Item Title: ${n.title}">${n.title}</h3>
                    </div>
                </div>
            `);let t="";try{const n=(a=this.lineItem.lineItem.properties)==null?void 0:a[window.eight.bundleBuilder.storefront.cartEngine.getTranslation("Your note")];t=n?`
                <div style="flex-basis: 100%;">
                    ${window.eight.bundleBuilder.storefront.cartEngine.getTranslation("Your note")}: ${n}
                </div>`:""}catch(n){console.warn("Could not read the bundle note",n)}const r=`
            <div data-bb-selector="line-item-bundle-contents" role="list">
                ${i.join("")}
                ${t}
            </div>
        `;return this.displayAsAccordion?`
                    <details data-bb-selector="line-item-bundle-accordion">
                        <summary>
                            ${o()}
                            <span>${e!==null?e.length:"?"} Products </span>
                        </summary>
                        <div data-bb-selector="line-item-bundle-contents">
                            ${r}
                        </div>
                    </details>
                `:`${r}`}renderActions(){return Object.keys(this.actions).map(i=>{const t=this.actions[i];return t.allowedVersion.includes(this.version)?`
                    <div
                        data-bb-line-item-card-action="${i}"
                        data-bb-bundle-id="${this.configuredBundleId}"
                        role="button"
                        tabindex="0"
                        aria-label="action: ${t.displayedText}"
                    >
                        <span>${t.displayedText}</span>
                    </div>
                `:""}).join("")}renderImage(e){return e?`<img src="${e}" alt="${this.lineItem.title}" width="80px" height="80px" data-bb-selector="line-item-thumbnail" aria-label="Bundle representative image"/>`:""}renderRecurring(){if(this.frequency){const[e,i]=this.frequency.split("-");let t="";return i==="days"?t=e==="1"?this.frequencyTranslations.day:this.frequencyTranslations.days:i==="weeks"?t=e==="1"?this.frequencyTranslations.week:this.frequencyTranslations.weeks:i==="months"&&(t=e==="1"?this.frequencyTranslations.month:this.frequencyTranslations.months),`<span data-bb-selector="line-item-card-frequency" aria-label="Recurring frequency">${t.replace(/{{\s*amount\s*}}/,e)}</span>`}return""}renderCompareAtPrice(){return!this.showCompareAtPrice||!this.lineItem.originalPrice||this.lineItem.originalPrice<=this.lineItem.price?"":`<div data-bb-selector="line-item-card-compare-at-price" aria-label="Compare at price">${window.eight.bundleBuilder.storefront.cartEngine.formatMoney(this.lineItem.originalPrice)}</div>`}init(){const{image:e,title:i,price:t}=this.lineItem;this.innerHTML=`
            <div data-bb-selector="line-item-card-header">
                <div data-bb-selector="line-item-card-thumnail-wrapper">
                    ${this.renderImage(e)}
                </div>
                <div data-bb-selector="line-item-card-details">
                    <div data-bb-selector="line-item-card-title-price">
                        <h2 data-bb-selector="line-item-card-title" aria-label="Title: ${i}">${i}</h2>
                        <div data-bb-selector="line-item-card-price-wrapper">
                            ${this.renderCompareAtPrice()}
                            <div data-bb-selector="line-item-card-price" aria-label="Bundle Price">${window.eight.bundleBuilder.storefront.cartEngine.formatMoney(t)}</div>
                        </div>
                        ${this.renderRecurring()}
                    </div>

                    <div data-bb-selector="line-item-card-actions" aria-label="Actions list">
                        ${this.renderActions()}
                    </div>
                </div>
            </div>
            ${this.renderContents()}
        `,Object.keys(this.actions).forEach(r=>{const a=this.actions[r];a.allowedVersion.includes(this.version)&&this.querySelector(`[data-bb-line-item-card-action="${r}"]`).addEventListener("click",()=>{l(a.event,{...a.details})})})}}window.customElements.define("bundle-builder-line-card",c);