/*!
 * Built with Stencil
 * By PostNord.
 */
import { h, Host } from "@stencil/core";
import { translations } from "./translations";
import { sv, uuidv4, awaitTopbar } from "../../../index";
/** Check the delivery date for letters, newspapers and direct mail that are distributed every second day. */
export class PnZipcodeSearch {
    /** This language property will update when pnTopbar loads */
    searchId = `pn-zipcode-${uuidv4()}`;
    hostElement;
    validZipCode;
    loading = false;
    showResult = false;
    zipCodeSearchResult = {
        delivery: '',
        upcoming: '',
        city: '',
        postalCode: '',
    };
    error = false;
    errorMessage;
    /** The `language` property will be prioritized before the pnTopbar language. */
    language = null;
    /** Set a pre initialized value. */
    value;
    /** Event fired when search has result */
    searchsuccessful;
    async componentWillLoad() {
        if (this.language === null)
            await awaitTopbar(this.hostElement);
        if (!!this.value)
            this.handleSearch(this.value);
    }
    translation(key) {
        return translations[key][this.language || sv];
    }
    handleSearch(value) {
        this.value = value;
        this.validateZipCode();
        if (this.error) {
            this.errorMessage = 'VALIDATION_ERROR_MESSAGE';
            return;
        }
        this.zipCodeSearch();
    }
    async zipCodeSearch() {
        this.loading = true;
        await fetch(`https://portal.postnord.com/api/sendoutarrival/closest?postalCode=${this.validZipCode}`)
            .then(response => response.json())
            .then(data => {
            this.showResult = true;
            this.zipCodeSearchResult = data;
            this.searchsuccessful.emit(true);
        })
            .catch(() => {
            this.error = true;
            this.errorMessage = 'SERVER_ERROR_MESSAGE';
            this.searchsuccessful.emit(false);
        })
            .finally(() => {
            this.loading = false;
        });
    }
    validateZipCode() {
        // Removes spaces and dashes
        const formatValue = this.value ? this.value.replace(/[ -]/gi, '') : '';
        const validRegex = /^\d{5}$/;
        const valid = validRegex.test(formatValue);
        this.error = !valid;
        if (valid) {
            this.validZipCode = formatValue;
        }
    }
    renderSearchResult() {
        if (!this.loading && !this.error && this.showResult) {
            return (h("output", { class: "pn-search-results", htmlFor: this.searchId }, h("p", { class: "text-row" }, h("span", null, this.translation('CLOSEST_DELIVERY_DATE')), h("h3", { class: "delivery-date" }, this.zipCodeSearchResult.delivery)), h("p", { class: "text-row" }, h("span", null, this.translation('NEXT_DELIVERY_DATE')), h("h3", { class: "delivery-date" }, this.zipCodeSearchResult.upcoming)), h("p", { class: "text-row" }, h("span", null, this.translation('ZIP_CODE')), h("h3", null, this.zipCodeSearchResult.postalCode, ", ", this.zipCodeSearchResult.city || 'N/A'))));
        }
    }
    renderErrorMessage() {
        if (this.error && !this.loading) {
            return (h("p", { class: "pn-error-text", role: "alert" }, h("small", null, this.translation(this.errorMessage))));
        }
    }
    render() {
        return (h(Host, { key: 'b9314bbca808c725bc074d1dc9e58223bb551468' }, h("pn-search-field", { key: '4c7eaf8c96aa36e17c546371345c7aac6a0c5ee7', label: this.translation('PLACEHOLDER_TEXT'), value: this.value, searchid: this.searchId, loading: this.loading, button: "icon", buttonLabel: this.translation('SEARCH'), placeholder: this.translation('PLACEHOLDER_TEXT'), onSearch: e => this.handleSearch(e.detail) }), this.renderSearchResult(), this.renderErrorMessage()));
    }
    static get is() { return "pn-zipcode-search"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-zipcode-search.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-zipcode-search.css"]
        };
    }
    static get properties() {
        return {
            "language": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "PnZipCodeSearchLanguages",
                    "resolved": "\"\" | \"en\" | \"sv\"",
                    "references": {
                        "PnZipCodeSearchLanguages": {
                            "location": "import",
                            "path": "@/index",
                            "id": "src/index.ts::PnZipCodeSearchLanguages",
                            "referenceLocation": "PnZipCodeSearchLanguages"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The `language` property will be prioritized before the pnTopbar language."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "language",
                "defaultValue": "null"
            },
            "value": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set a pre initialized value."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value"
            }
        };
    }
    static get states() {
        return {
            "validZipCode": {},
            "loading": {},
            "showResult": {},
            "zipCodeSearchResult": {},
            "error": {},
            "errorMessage": {}
        };
    }
    static get events() {
        return [{
                "method": "searchsuccessful",
                "name": "searchsuccessful",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event fired when search has result"
                },
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "hostElement"; }
}
