import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { F as FetchHelper } from './FetchHelper.js';
import { M as MarketWebContextService } from './MarketWebContextService.js';
import { t as translations } from './translations2.js';
import { a as arrow_left } from './arrow_left.js';
import { a as arrow_right } from './arrow_right.js';
import { d as defineCustomElement$6 } from './pn-proxio-productcard2.js';
import { d as defineCustomElement$5 } from './pn-proxio-productcard-description2.js';
import { d as defineCustomElement$4 } from './pn-proxio-productcard-information2.js';
import { d as defineCustomElement$3 } from './pn-proxio-productcard-pricelink2.js';
import { d as defineCustomElement$2 } from './pn-titletag2.js';

const pnProxioPricegroupCss = "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}}pn-proxio-pricegroup div.proxio-pricegroup-container{max-width:99.4rem}pn-proxio-pricegroup div.weightcontainer{margin:2.8rem 0}pn-proxio-pricegroup div.weightvaluecontainer{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:flex-start}pn-proxio-pricegroup div.weightvaluecontainer pn-button{transform:translateY(-0.4rem)}pn-proxio-pricegroup div.weightvaluecontainer pn-button button::before{display:none}pn-proxio-pricegroup div.weightradios{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap;color:#005d92;width:80%;margin:0 3.6rem;position:relative;width:0%}pn-proxio-pricegroup div.weightradios[data-carousel-container-position=end50]{width:45%;margin-left:auto;margin-right:3.6rem}@media screen and (max-width: 48em){pn-proxio-pricegroup div.weightradios[data-carousel-container-position=end50]{width:40%}}pn-proxio-pricegroup div.weightradios[data-carousel-container-position=end75]{width:65%;margin-left:auto;margin-right:3.6rem}@media screen and (max-width: 48em){pn-proxio-pricegroup div.weightradios[data-carousel-container-position=end75]{margin-right:auto}}pn-proxio-pricegroup div.weightradios[data-carousel-container-position=start50]{width:45%;margin-right:auto;margin-left:3.6rem}@media screen and (max-width: 48em){pn-proxio-pricegroup div.weightradios[data-carousel-container-position=start50]{width:40%}}pn-proxio-pricegroup div.weightradios[data-carousel-container-position=start75]{width:65%;margin-right:auto;margin-left:3.6rem}@media screen and (max-width: 48em){pn-proxio-pricegroup div.weightradios[data-carousel-container-position=start75]{margin-left:auto}}pn-proxio-pricegroup div.weightradios[data-carousel-container-position=default]{flex:0 0 auto;width:80%}@media screen and (max-width: 48em){pn-proxio-pricegroup div.weightradios[data-carousel-container-position=default]{width:65%}}pn-proxio-pricegroup div.weightdata{display:flex;flex-direction:column;align-items:center;align-content:center;flex-wrap:wrap;justify-content:space-between;gap:1.2rem;min-width:4rem;cursor:pointer}pn-proxio-pricegroup div.weightdata label{font-size:1.4rem;cursor:pointer}pn-proxio-pricegroup div.weightdata[data-carousel-position=\"0\"]{font-size:2rem;font-weight:700}@media screen and (max-width: 48em){pn-proxio-pricegroup div.weightdata[data-carousel-position=\"2\"],pn-proxio-pricegroup div.weightdata[data-carousel-position=\"-2\"]{display:none}}pn-proxio-pricegroup div.weightdata[data-carousel-position=outside]{display:none}pn-proxio-pricegroup div.weightdata input[type=radio]{-webkit-appearance:none;-moz-appearance:none;width:1.2rem;height:1.2rem;background-color:#005d92;border-radius:50%;margin:0;cursor:pointer}pn-proxio-pricegroup div.weightdata input[type=radio]:checked{z-index:1;transform:translateY(-0.1rem);height:1.4rem;width:1.4rem;box-shadow:0 0 0 0.3rem #ffffff, 0 0 0 0.4rem #005d92}pn-proxio-pricegroup div.weightline{width:100%;background-color:#f3f2f2;z-index:-1;height:0.8rem;-webkit-transform:translateX(2.1rem) translateY(1.32rem);transform:translateX(2.1rem) translateY(1rem);border-radius:2rem;margin-right:3.5rem}pn-proxio-pricegroup pn-button[disabled=disabled]{opacity:0.2}pn-proxio-pricegroup pn-button[disabled=disabled] button{cursor:default}pn-proxio-pricegroup pn-button[disabled=disabled] button.pn-button-light .pn-button-bg:after{background-color:#ffffff}pn-proxio-pricegroup pn-button[disabled=disabled] button[data-tooltip-open]:before{display:none}pn-proxio-pricegroup pn-button button div.button-tooltip{display:none}pn-proxio-pricegroup pn-button button:focus .pn-button-bg{box-shadow:none}";
const PnProxioPricegroupStyle0 = pnProxioPricegroupCss;

const PnProxioPricegroup$1 = /*@__PURE__*/ proxyCustomElement(class PnProxioPricegroup extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.endpoint = null;
        this.language = 'sv';
        this.market = 'se';
        this.tariffid = '';
        this.cache = true;
        this.activeWeightIndex = 0;
        this.data = null;
        this.i18n = translations['sv'];
    }
    fetchHelper = new FetchHelper('proxiopricegroup');
    componentWillLoad() {
        this.setInitialValues().then(() => {
            this.init();
        });
    }
    async setInitialValues(href = window.location.href) {
        const marketWebContextService = new MarketWebContextService(href);
        const environment = await marketWebContextService.getEnvironmentName();
        if (!this.endpoint && environment?.indexOf('local') === -1) {
            const market = await marketWebContextService.getMarket();
            this.endpoint = await marketWebContextService.getEndpoint(environment, market);
        }
        if (!this.endpoint) {
            this.endpoint = '';
        }
    }
    init() {
        this.setLanguage();
        this.fetchData();
    }
    async fetchData() {
        if (!this.market || !this.language || !this.tariffid) {
            return;
        }
        const endpoint = this.endpoint.lastIndexOf('/') === this.endpoint.length - 1 ? this.endpoint.substring(0, this.endpoint.length - 1) : this.endpoint;
        const fetchUrl = `${endpoint}/api/proxio/price-list-group?tariffId=${this.tariffid}&market=${this.market}&language=${this.language}&cached=${this.cache}`;
        //const fetchUrl = `https://localhost:51547/api/proxio/price-list-group?tariffId=${this.tariffid}&market=${this.market}&language=${this.language}&cached=${this.cache}`;
        const data = (await this.fetchHelper.fetchJson(fetchUrl, {
            mode: 'cors',
        }, this.cache, this.onFetchData.bind(this)));
        if (data?.proxioProduct) {
            this.data = data;
        }
    }
    onFetchData(data) {
        this.data = data;
    }
    setActiveWeightIndex(weightIndex) {
        let minIndex = 0;
        let maxIndex = this.data.proxioProduct?.weightAndPriceList?.length - 1 ?? minIndex;
        weightIndex = weightIndex > maxIndex ? maxIndex : weightIndex;
        weightIndex = weightIndex < minIndex ? minIndex : weightIndex;
        this.activeWeightIndex = weightIndex;
    }
    setLanguage() {
        if (translations[this.language]) {
            this.i18n = translations[this.language];
        }
    }
    getPriceString(product) {
        let price = product.weightAndPriceList ? product?.weightAndPriceList[this.activeWeightIndex]?.item2 : '';
        return price ? this.i18n.from + price : '';
    }
    getProductLink(product, productWeightGroupList) {
        let productId = productWeightGroupList[this.activeWeightIndex]?.item2;
        let productLink = product.productLink ? product?.productLink : '';
        return productLink ? productLink + (productId ? '?productId=' + productId : '') : '';
    }
    isActive(index) {
        return index === this.activeWeightIndex;
    }
    getCarouselPosition(index) {
        switch (index) {
            case this.activeWeightIndex - 2: {
                return -2;
            }
            case this.activeWeightIndex - 1: {
                return -1;
            }
            case this.activeWeightIndex: {
                return 0;
            }
            case this.activeWeightIndex + 1: {
                return 1;
            }
            case this.activeWeightIndex + 2: {
                return 2;
            }
            default:
                return 'outside';
        }
    }
    getContainerPosition() {
        let maxIndex = this.data.proxioProduct.weightAndPriceList.length - 1;
        switch (this.activeWeightIndex) {
            case 0: {
                return 'end50';
            }
            case 1: {
                return 'end75';
            }
            case maxIndex - 1: {
                return 'start75';
            }
            case maxIndex: {
                return 'start50';
            }
            default: {
                return 'default';
            }
        }
    }
    render() {
        return (h(Host, { key: '21313fd931fd89e820c322a7a53387c0c783d864' }, this.data?.proxioProduct ? (h("div", { class: "proxio-pricegroup-container" }, h("div", { class: "weightcontainer" }, this.data.proxioProduct.weightAndPriceList ? (h("div", { class: "weightvaluecontainer" }, h("pn-button", { disabled: this.activeWeightIndex === 0 ? 'disabled' : null, icon: arrow_left, appearance: "light", small: "true", onClick: () => this.setActiveWeightIndex(this.activeWeightIndex - 1) }), h("div", { class: "weightradios ", "data-carousel-container-position": this.getContainerPosition() }, h("div", { class: "weightline" }), this.data.proxioProduct.weightAndPriceList.map((weightItem, index) => this.getCarouselPosition(index) !== null ? (h("div", { class: "weightdata", "data-carousel-position": this.getCarouselPosition(index), onClick: () => this.setActiveWeightIndex(index) }, h("input", { type: "radio", id: 'weightradio' + index, name: "weightradio", value: index, checked: this.isActive(index) }), h("label", { htmlFor: 'weightradio' + index }, weightItem.item1))) : null)), h("pn-button", { disabled: this.activeWeightIndex === this.data.proxioProduct?.weightAndPriceList?.length - 1 ? 'disabled' : null, icon: arrow_right, appearance: "light", small: "true", onClick: () => this.setActiveWeightIndex(this.activeWeightIndex + 1) }))) : null), h("pn-proxio-productcard", null, h("pn-illustration", { slot: "illustrationmobile", illustration: this.data.proxioProduct.productIcon }), h("h2", { slot: "title" }, this.data.proxioProduct.productTitle), h("pn-proxio-productcard-description", { slot: "description", heading: this.data.proxioProduct.productPreamble, highlight: this.data.proxioProduct.deliveryDateInformation, list: this.data.proxioProduct.productDescriptionBulletListItems }), h("div", { slot: "information" }, h("pn-proxio-productcard-information", { label: this.i18n.labelMaxDimensions, information: this.data.proxioProduct.productPackageDimensionsList }), h("pn-proxio-productcard-information", { label: this.i18n.labelMaxDimensionsRoll, information: this.data.proxioProduct.productRollDimensionsList })), h("div", { slot: "bottomtags" }, this.data.proxioProduct.usp1 ? h("pn-titletag", { color: "gray50" }, this.data.proxioProduct.usp1) : null, this.data.proxioProduct.usp2 ? h("pn-titletag", { color: "gray50" }, this.data.proxioProduct.usp2) : null, this.data.proxioProduct.usp3 ? h("pn-titletag", { color: "gray50" }, this.data.proxioProduct.usp3) : null), h("pn-illustration", { slot: "illustration", illustration: this.data.proxioProduct.productIcon }), h("div", { slot: "pricelink" }, h("pn-proxio-productcard-pricelink", { price: this.getPriceString(this.data.proxioProduct), link: this.getProductLink(this.data.proxioProduct, this.data.proxioProduct.productWeightGroupList), linktext: this.data.proxioProduct.productLinkText }), this.data.relatedProxioProducts
            ? this.data.relatedProxioProducts.map(product => (h("pn-proxio-productcard-pricelink", { price: this.getPriceString(product), link: product.productLink, linktext: product.productLinkText })))
            : null)))) : null));
    }
    static get style() { return PnProxioPricegroupStyle0; }
}, [0, "pn-proxio-pricegroup", {
        "endpoint": [1025],
        "language": [1],
        "market": [1],
        "tariffid": [1],
        "cache": [4],
        "activeWeightIndex": [32],
        "data": [32],
        "i18n": [32]
    }, [[0, "activeWeightIndex", "setActiveWeightIndex"], [0, "language", "setLanguage"]]]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-proxio-pricegroup", "pn-proxio-productcard", "pn-proxio-productcard-description", "pn-proxio-productcard-information", "pn-proxio-productcard-pricelink", "pn-titletag"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-proxio-pricegroup":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnProxioPricegroup$1);
            }
            break;
        case "pn-proxio-productcard":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "pn-proxio-productcard-description":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "pn-proxio-productcard-information":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "pn-proxio-productcard-pricelink":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "pn-titletag":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const PnProxioPricegroup = PnProxioPricegroup$1;
const defineCustomElement = defineCustomElement$1;

export { PnProxioPricegroup, defineCustomElement };

//# sourceMappingURL=pn-proxio-pricegroup.js.map