import { h, Host } from "@stencil/core";
import { FetchHelper } from "../../../globals/FetchHelper";
import { MarketWebContextService } from "../../../globals/MarketWebContextService";
import { translations } from "./translations";
import { arrow_left, arrow_right } from "pn-design-assets/pn-assets/icons.js";
export class PnProxioPricegroup {
    constructor() {
        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 is() { return "pn-proxio-pricegroup"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-proxio-pricegroup.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-proxio-pricegroup.css"]
        };
    }
    static get properties() {
        return {
            "endpoint": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Specifies which endpoint domain we should load from"
                },
                "attribute": "endpoint",
                "reflect": false,
                "defaultValue": "null"
            },
            "language": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "language",
                "reflect": false,
                "defaultValue": "'sv'"
            },
            "market": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "market",
                "reflect": false,
                "defaultValue": "'se'"
            },
            "tariffid": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "tariffid",
                "reflect": false,
                "defaultValue": "''"
            },
            "cache": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "cache",
                "reflect": false,
                "defaultValue": "true"
            }
        };
    }
    static get states() {
        return {
            "activeWeightIndex": {},
            "data": {},
            "i18n": {}
        };
    }
    static get listeners() {
        return [{
                "name": "activeWeightIndex",
                "method": "setActiveWeightIndex",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "language",
                "method": "setLanguage",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=pn-proxio-pricegroup.js.map
