/*!
 * Built with Stencil
 * By PostNord.
 */
import { h, Host } from "@stencil/core";
import { translations } from "./translations";
import { sv, awaitTopbar } from "../../../index";
export class PnOcrSearch {
    hostElement;
    loading = false;
    error = false;
    ocrNumber;
    searchSuccess = false;
    invalidOcrNumber = false;
    /** The `language` property will be prioritized before the pnTopbar language. */
    language = null;
    async componentWillLoad() {
        if (this.language === null)
            await awaitTopbar(this.hostElement);
    }
    getTranslation(key) {
        return translations[key][this.language || sv];
    }
    handleSearch(e) {
        // reset states
        this.invalidOcrNumber = false;
        this.searchSuccess = false;
        this.error = false;
        const validationResult = this.validateOcrNumber(e.detail);
        if (validationResult.error) {
            this.invalidOcrNumber = true;
            return;
        }
        this.ocrNumberSearch(validationResult.value);
    }
    async ocrNumberSearch(ocrNumber) {
        this.loading = true;
        await fetch(`https://portal.postnord.com/public-service/api/ocr?key=${ocrNumber}`)
            .then(response => response.json())
            .then(data => {
            this.ocrNumber = data.newOcr;
            this.searchSuccess = true;
        })
            .catch(() => {
            this.error = true;
            this.searchSuccess = false;
        })
            .finally(() => {
            this.loading = false;
        });
    }
    validateOcrNumber(value) {
        // Removes spaces and dashes
        const formatValue = value ? value.replace(/[ -]/gi, '') : '';
        // Looks for non-digits
        const ocrRegex = new RegExp(/\D+/);
        // Needs to be atleast 6 numbers
        const error = ocrRegex.test(formatValue) || formatValue.length !== 6;
        return { error, value: formatValue };
    }
    renderSearchResult() {
        if (!this.loading && !this.error && this.searchSuccess) {
            return (h("div", { class: "search-results" }, this.getTranslation('SEARCH_SUCCESS'), ": ", h("b", null, this.ocrNumber)));
        }
    }
    renderErrorMessage() {
        if (this.invalidOcrNumber && !this.loading) {
            return (h("div", { class: "invalid-text-container" }, h("p", { class: "invalid-ocr" }, this.getTranslation('ERROR_INVALID_LICENSE_NUMBER'))));
        }
        if (this.error && !this.loading) {
            return (h("div", { class: "error-text-container" }, h("p", { class: "bold" }, this.getTranslation('ERROR_NO_RESULTS')), h("p", { class: "bold" }, this.getTranslation('ERROR_REASON_HEADER')), h("p", null, this.getTranslation('ERROR_REASON_ONE')), h("p", null, this.getTranslation('ERROR_REASON_TWO'))));
        }
    }
    render() {
        return (h(Host, { key: 'edf8696a2d3f115868f13d3bfa9c5e9c4128426c' }, h("pn-search-field", { key: 'b54f8575a5ebdd518e4082f78799f417448d53e9', loading: this.loading, label: this.getTranslation('SEARCH_BUTTON'), button: "icon", buttonLabel: this.getTranslation('SEARCH_BUTTON'), placeholder: this.getTranslation('PLACEHOLDER_TEXT'), onSearch: e => this.handleSearch(e) }), this.renderSearchResult(), this.renderErrorMessage()));
    }
    static get is() { return "pn-ocr-search"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-ocr-search.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-ocr-search.css"]
        };
    }
    static get properties() {
        return {
            "language": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "PnLanguages",
                    "resolved": "\"\" | \"da\" | \"en\" | \"fi\" | \"no\" | \"sv\"",
                    "references": {
                        "PnLanguages": {
                            "location": "import",
                            "path": "@/index",
                            "id": "src/index.ts::PnLanguages",
                            "referenceLocation": "PnLanguages"
                        }
                    }
                },
                "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"
            }
        };
    }
    static get states() {
        return {
            "loading": {},
            "error": {},
            "ocrNumber": {},
            "searchSuccess": {},
            "invalidOcrNumber": {}
        };
    }
    static get elementRef() { return "hostElement"; }
}
