import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { a as convertFileFromStream } from './convert.js';
import { s as state, d as defineCustomElement$5 } from './pn-find-service-and-price-result2.js';
import { d as defineCustomElement$6 } from './pn-choice-button2.js';
import { d as defineCustomElement$4 } from './pn-product-card2.js';
import { d as defineCustomElement$3 } from './pn-product-tile-info2.js';
import { d as defineCustomElement$2 } from './pn-product-tile-price2.js';

const translations = {
    sv: {
        componentheading: 'Vad vill du skicka?',
        deliveryscopeheading: 'Hit eller dit?',
        sizeheading: 'Hur mycket väger det?',
        resultlistheading: 'Några utvalda val',
        weightlabel: 'Vikt',
        maxweightlabel: 'Maxvikt',
        maxmeasurementlabel: 'Maxvolym',
        senddirectcta: 'Köp frakt via Skicka Direkt',
        stampshopcta: 'Köp frimärken via vår webshop',
    },
    en: {
        componentheading: 'What do you want to send?',
        deliveryscopeheading: 'Here or there?',
        sizeheading: 'How much does it weigh?',
        resultlistheading: 'Some suitable options for you',
        weightlabel: 'Weight',
        maxweightlabel: 'Max weight',
        maxmeasurementlabel: 'Maximum measurement',
        senddirectcta: 'Buy shipping in Send Direct',
        stampshopcta: 'Order home stamps from the webshop',
    },
    da: {
        componentheading: 'Vad vill du skicka?',
        deliveryscopeheading: 'Here or there?',
        sizeheading: 'How much does it weigh?',
        resultlistheading: 'Some suitable options for you',
        weightlabel: 'Vægt',
        maxweightlabel: 'Max vægt',
        maxmeasurementlabel: 'Maks. Volumen',
        senddirectcta: 'Buy shipping in Send Direct',
        stampshopcta: 'Order home stamps from the webshop',
    },
    no: {
        componentheading: 'Vad vill du skicka?',
        deliveryscopeheading: 'Here or there?',
        sizeheading: 'How much does it weigh?',
        resultlistheading: 'Some suitable options for you',
        weightlabel: 'Vekt',
        maxweightlabel: 'Maks vekt',
        maxmeasurementlabel: 'Maks volum',
        senddirectcta: 'Buy shipping in Send Direct',
        stampshopcta: 'Order home stamps from the webshop',
    },
    fi: {
        componentheading: 'Vad vill du skicka?',
        deliveryscopeheading: 'Here or there?',
        sizeheading: 'How much does it weigh?',
        resultlistheading: 'Some suitable options for you',
        weightlabel: 'Paino',
        maxweightlabel: 'Max paino',
        maxmeasurementlabel: 'Max äänenvoimakkuus',
        senddirectcta: 'Buy shipping in Send Direct',
        stampshopcta: 'Order home stamps from the webshop',
    },
};
const markets = {
    se: {
        currency: 'kr',
    },
    dk: {
        currency: 'dk',
    },
    fi: {
        currency: ' €',
    },
    no: {
        currency: 'kr',
    },
};

const postagetypes = [
  { name: 'Brev', value: 'letter', illustration: 'letterbox-reply-letter-plants' },
  { name: 'Paket', value: 'parcel', illustration: 'tracking' },
];

const deliveryscopes = {
  letter: [
    { name: 'Sweden', value: 'sweden', illustration: 'letterboxes' },
    { name: 'Abroad', value: 'abroad', illustration: 'character-box-letters-globe' },
  ],
  parcel: [
    { name: 'Sweden', value: 'sweden', illustration: 'letterboxes' },
    { name: 'Within Europe', value: 'withineurope', illustration: 'character-box-letters-globe' },
    { name: 'Outside Europe', value: 'outsideeurope', illustration: 'discover' },
  ],
};

const weights = {
  letter: [
    { name: '50g', abbreviation: 'g', value: 50 },
    { name: '100g', abbreviation: 'g', value: 100 },
    { name: '250g', abbreviation: 'g', value: 250 },
    { name: '500g', abbreviation: 'g', value: 500 },
    { name: '1kg', abbreviation: 'kg', value: 1 },
    { name: '2kg', abbreviation: 'kg', value: 2 },
  ],
  parcel: [
    { name: '1kg', abbreviation: 'kg', value: 1 },
    { name: '2kg', abbreviation: 'kg', value: 2 },
    { name: '3kg', abbreviation: 'kg', value: 3 },
    { name: '4kg', abbreviation: 'kg', value: 4 },
    { name: '5kg', abbreviation: 'kg', value: 5 },
    { name: '6kg', abbreviation: 'kg', value: 6 },
    { name: '7Kg', abbreviation: 'kg', value: 7 },
    { name: '8kg', abbreviation: 'kg', value: 8 },
    { name: '9kg', abbreviation: 'kg', value: 9 },
    { name: '10kg', abbreviation: 'kg', value: 10 },
    { name: '11kg', abbreviation: 'kg', value: 11 },
    { name: '12kg', abbreviation: 'kg', value: 12 },
    { name: '13kg', abbreviation: 'kg', value: 13 },
    { name: '14kg', abbreviation: 'kg', value: 14 },
    { name: '15kg', abbreviation: 'kg', value: 15 },
    { name: '16kg', abbreviation: 'kg', value: 16 },
    { name: '17kg', abbreviation: 'kg', value: 17 },
    { name: '18kg', abbreviation: 'kg', value: 18 },
    { name: '20kg', abbreviation: 'kg', value: 20 },
  ],
};

const pnFindServiceAndPriceCss = "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-find-service-and-price .findprice-form{max-width:50em;margin:0 auto}pn-find-service-and-price h2,pn-find-service-and-price .heading{text-align:center;font-size:1.5em;line-height:1.1;font-weight:bold;margin-bottom:1rem}pn-find-service-and-price .postagetypes,pn-find-service-and-price .deliveryscope{text-align:center;margin-bottom:3rem}pn-find-service-and-price .weightoption{display:flex;gap:1em}pn-find-service-and-price .weightoption-input{width:5em;position:relative}pn-find-service-and-price .weightoption-input input::-webkit-outer-spin-button,pn-find-service-and-price .weightoption-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}pn-find-service-and-price .weightoption-input-abbreviation{position:absolute;top:50%;transform:translateY(-50%);right:1.2em;margin-top:1.55rem;font-weight:500}pn-find-service-and-price .weightoption-range{flex-grow:1;align-self:flex-end;position:relative;top:0.5em}pn-find-service-and-price .weightoption-range input{width:calc(100% - 1.5em)}pn-find-service-and-price .weightoption-range datalist{width:100%;display:flex;justify-content:space-between;font-size:0.75em}pn-find-service-and-price .resultlist{margin:3em 0}";
const PnFindServiceAndPriceStyle0 = pnFindServiceAndPriceCss;

const PnfindServiceAndPrice = /*@__PURE__*/ proxyCustomElement(class PnfindServiceAndPrice extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.source = 'https://com-inte.postnord.com/globalassets/global/prices/sv-se-findprice.xlsx';
        this.language = 'sv';
        this.market = 'se';
        this.filteredItems = [];
        this.postagetype = {
            value: '',
            name: '',
            icon: '',
        };
        this.weight = { value: 0, name: '' };
        this.weightvalue = 0;
        this.deliveryscope = {
            value: '',
            name: '',
            icon: '',
        };
        this.sourceData = { types: [], data: [] };
    }
    componentWillLoad() {
        this.setState();
        this.getDataSource();
        // window.setTimeout(() => {
        //   this.postagetype = postagetypes[0];
        //   this.deliveryscope = deliveryscopes[this.postagetype.value][0];
        //   this.weight = weights[this.postagetype.value][0];
        //   this.weightvalue = this.weight.value;
        // }, 500)
    }
    async getDataSource() {
        const cacheBusting = `?cache=${Math.floor(Math.random() * (10000 - 1) + 1)}`;
        const req = await fetch(this.source + cacheBusting);
        const reqbody = await req.blob();
        try {
            const convertedData = await convertFileFromStream(reqbody);
            this.sourceData = convertedData;
            this.filterItems();
        }
        catch (e) {
            console.log('Unable to parse data');
        }
    }
    setState() {
        if (this.market) {
            state.market = markets[this.market];
        }
        if (this.language && translations[this.language]) {
            state.i18n = translations[this.language];
        }
    }
    filterItems() {
        // this.debug = `Postagetype: ${this.postagetype.value}. <br/>Weight: ${ this.weight.value }`;
        if (!this.sourceData?.data) {
            console.log('Data has not yet been loaded');
            return;
        }
        if (!this.postagetype) {
            return;
        }
        const typeData = this.sourceData.data.filter(x => x.what === this.postagetype.value);
        if (!this.deliveryscope) {
            return;
        }
        const deliveryScopeData = typeData.filter(x => x.deliveryscope === this.deliveryscope.value);
        if (!this.weight || !this.weight.value) {
            return;
        }
        // For letters we use grams. Otherwise we use KG
        const comparisonWeight = this.weight.abbreviation.toLocaleLowerCase() === 'kg' && this.postagetype.value === 'letter' ? this.weight.value * 1000 : this.weight.value;
        let weightFilteredData = deliveryScopeData.filter(x => x.maxweight === comparisonWeight);
        // In parcels the maxwidths don't necessarily start at 1kg so we fetch any type below the user selected value
        if (weightFilteredData.length === 0) {
            weightFilteredData = deliveryScopeData.filter(x => x.maxweight >= comparisonWeight);
            if (weightFilteredData.length > 0) {
                // We reverse the result array since the map will take the last unique item instead of the first
                const uniqueWeightOptions = [...new Map(weightFilteredData.reverse().map(item => [item['id'], item])).values()];
                if (uniqueWeightOptions.length > 0) {
                    weightFilteredData = uniqueWeightOptions;
                }
            }
        }
        this.filteredItems = weightFilteredData;
    }
    render() {
        return (h("div", { key: '51cd3bdb7327102e9da2121b7a0938173b928d77' }, h("div", { key: 'c5ab609c11853cc7f1c494b70780b9b901cb64db', class: "findprice-form" }, state.i18n.componentheading ? h("h2", null, state.i18n.componentheading) : null, h("div", { key: 'e888f71144a581259fc7fdb743b316a69a016419', class: "postagetypes" }, postagetypes.map(postagetype => (h("pn-choice-button", { choiceid: postagetype.value, value: postagetype.value, name: "postagetype", type: "radio", checked: postagetype.value === this.postagetype.value, onChange: () => {
                this.postagetype = postagetypes.filter(x => x.value === postagetype.value)[0];
                this.deliveryscope = { value: '', name: '', icon: '' };
                this.weight = { value: 0, name: '' };
                this.weightvalue = this.weight.value;
            } }, h("pn-illustration", { illustration: postagetype.illustration }), " ", postagetype.name)))), this.postagetype.value && deliveryscopes[this.postagetype.value] ? (h("div", null, state.i18n.deliveryscopeheading ? h("div", { class: "heading" }, state.i18n.deliveryscopeheading) : null, h("div", { class: "deliveryscope" }, deliveryscopes[this.postagetype.value].map(deliveryscope => (h("pn-choice-button", { choiceid: this.postagetype.value + deliveryscope.value, value: deliveryscope.value, name: "deliveryscope", type: "radio", checked: deliveryscope.value === this.deliveryscope.value, onChange: () => {
                this.deliveryscope = deliveryscopes[this.postagetype.value].filter(x => x.value === deliveryscope.value)[0];
                if (this.weight.value === 0) {
                    this.weight = weights[this.postagetype.value][0];
                    this.weightvalue = this.weight.value;
                }
            } }, h("pn-illustration", { illustration: deliveryscope.illustration }), " ", deliveryscope.name)))))) : null, this.postagetype.value && weights[this.postagetype.value] && this.deliveryscope.value ? (h("div", null, state.i18n.sizeheading ? h("div", { class: "heading" }, state.i18n.sizeheading) : null, h("div", { class: "weightoption" }, h("div", { class: "weightoption-input" }, h("pn-input", { inputid: "weightvalue", name: "weightvalue", type: "number", label: state.i18n.weightlabel, value: this.weightvalue, onChange: e => {
                if (e && e.target && e.target.value) {
                    const weightNum = parseInt(e.target.value, 10);
                    if (!isNaN(weightNum)) {
                        let matchingWeights = weights[this.postagetype.value].filter(x => {
                            let weightInGrams = x.abbreviation === 'kg' ? x.value * 1000 : x.value;
                            return weightInGrams >= weightNum;
                        });
                        if (matchingWeights && matchingWeights.length > 0) {
                            this.weight = matchingWeights[0];
                            this.weightvalue = this.weight.value;
                        }
                    }
                }
            } }), h("span", { class: "weightoption-input-abbreviation" }, this.weight.abbreviation)), h("div", { class: "weightoption-range" }, h("input", { type: "range", id: "weightrange", name: "weightrange", list: "weightlist", value: !this.weight.value ? 0 : weights[this.postagetype.value].findIndex(x => x.value === this.weightvalue), onChange: e => {
                const value = e.target.value;
                this.weight = weights[this.postagetype.value][value];
                this.weightvalue = this.weight.value;
            }, min: "0",
            // max={ weights[this.postagetype.value][weights[this.postagetype.value].length - 1].value }
            max: weights[this.postagetype.value].length - 1 }), h("datalist", { id: "weightlist" }, weights[this.postagetype.value].map((weight, weightindex) => {
            let labelText = weight.name;
            if (weights[this.postagetype.value].length > 6) {
                labelText = weightindex % 5 === 0 || weightindex === 0 || weightindex === weights[this.postagetype.value].length - 1 ? weight.name : '';
            }
            return h("option", { value: weightindex, ...(labelText ? { label: labelText } : {}) });
        })))))) : null), this.filteredItems && this.filteredItems.length > 0 ? (h("div", { class: "resultlist" }, state.i18n.resultlistheading ? h("div", { class: "heading" }, state.i18n.resultlistheading) : null, this.filteredItems.map((item) => (h("div", null, h("pn-find-service-and-price-result", { item: item })))))) : null));
    }
    static get watchers() { return {
        "market": ["setState"],
        "language": ["setState"],
        "postagetype": ["filterItems"],
        "deliveryscope": ["filterItems"],
        "weightvalue": ["filterItems"]
    }; }
    static get style() { return PnFindServiceAndPriceStyle0; }
}, [0, "pn-find-service-and-price", {
        "source": [1],
        "language": [1025],
        "market": [1025],
        "filteredItems": [32],
        "postagetype": [32],
        "weight": [32],
        "weightvalue": [32],
        "deliveryscope": [32],
        "sourceData": [32]
    }, undefined, {
        "market": ["setState"],
        "language": ["setState"],
        "postagetype": ["filterItems"],
        "deliveryscope": ["filterItems"],
        "weightvalue": ["filterItems"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-find-service-and-price", "pn-choice-button", "pn-find-service-and-price-result", "pn-product-card", "pn-product-tile-info", "pn-product-tile-price"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-find-service-and-price":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnfindServiceAndPrice);
            }
            break;
        case "pn-choice-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "pn-find-service-and-price-result":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "pn-product-card":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "pn-product-tile-info":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "pn-product-tile-price":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const PnFindServiceAndPrice = PnfindServiceAndPrice;
const defineCustomElement = defineCustomElement$1;

export { PnFindServiceAndPrice, defineCustomElement };

//# sourceMappingURL=pn-find-service-and-price.js.map