import { h, Host } from "@stencil/core";
import { ErrorPageStatusCodes } from "./notification-error-page-httpstatus.enum";
import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
import { notificationIllustrations } from "./illustrations/illustrations";
import { UtilBreakpointObserverBreakpoints } from "../../../enums";
/**
 * @slot default - Html-text, använd för att skriva över komponentens default brödtext
 * @slot search - Skicka in en komponent eller kod som har stöd för att skicka vidare besökaren till en söksida
 * @slot links - Ska vara en lista <code><ul></code> eller <code><ol></code> med listobjekt med länkar <code><li><a href="/">Start</a></li></code>
 *
 * @enums ErrorPageStatusCodes - notification-error-page-httpstatus.enum.ts
 *
 * @swedishName Felsida
 */
export class NotificationErrorPage {
    constructor() {
        this.hasSearch = undefined;
        this.hasLinks = undefined;
        this.hasBodyText = undefined;
        this.currentIllustration = undefined;
        this.isMobile = undefined;
        this.afId = randomIdGenerator('digi-notification-error-page');
        this.afHttpStatusCode = undefined;
        this.afCustomHeading = undefined;
    }
    setIllustration(name) {
        const { NotificationIllustrationComponent: NotificationIllustrationComponent } = notificationIllustrations[name];
        this.currentIllustration = NotificationIllustrationComponent;
    }
    setHasSearch() {
        const searchSlot = !!this.hostElement.querySelector('[slot="search"]');
        if (searchSlot) {
            this.hasSearch = searchSlot;
        }
    }
    setHasLinks() {
        const linksSlot = !!this.hostElement.querySelector('[slot="links"]');
        if (linksSlot) {
            this.hasLinks = linksSlot;
        }
    }
    setHasBodyText() {
        const bodyTextSlot = !!this.hostElement.querySelector('[slot="bodytext"]');
        this.hasBodyText = bodyTextSlot;
    }
    componentWillLoad() {
        this.setHasSearch();
        this.setHasLinks();
        this.setHasBodyText();
        this.getImage();
    }
    componentWillUpdate() {
        this.setHasSearch();
        this.setHasLinks();
        this.setHasBodyText();
        this.getImage();
    }
    getText() {
        const customHeading = this.afCustomHeading && this.afCustomHeading !== ''
            ? this.afCustomHeading
            : undefined;
        switch (this.afHttpStatusCode) {
            case ErrorPageStatusCodes.FORBIDDEN:
                return {
                    heading: customHeading !== null && customHeading !== void 0 ? customHeading : 'Sidan är låst',
                    body: '<p>Du behöver vara inloggad för att kunna se den här sidan. Kontrollera även att du har aktiverat VPN.</p>'
                };
            case ErrorPageStatusCodes.GATEWAY_TIMEOUT:
                return {
                    heading: customHeading !== null && customHeading !== void 0 ? customHeading : 'Sidan kan inte visas just nu',
                    body: '<p>Prova igen om en stund. Om felet upprepas kan du göra en felanmälan.</p>'
                };
            case ErrorPageStatusCodes.GONE:
                return {
                    heading: customHeading !== null && customHeading !== void 0 ? customHeading : 'Sidan har tagits bort',
                    body: '<p>Du kan söka på webbplatsen eller använda länkarna för att komma vidare.</p>'
                };
            case ErrorPageStatusCodes.INTERNAL_SERVER_ERRROR:
                return {
                    heading: customHeading !== null && customHeading !== void 0 ? customHeading : 'Sidan kan inte visas just nu',
                    body: '<p>Prova igen om en stund. Om felet upprepas kan du göra en felanmälan.</p>'
                };
            case ErrorPageStatusCodes.NOT_FOUND:
                return {
                    heading: customHeading !== null && customHeading !== void 0 ? customHeading : 'Sidan kan inte hittas',
                    body: '<p>Det kan bero på att länken är felaktig eller att sidan inte finns kvar. Du kan prova att ladda om sidan, söka på webbplatsen eller använda länkarna för att komma vidare.</p>'
                };
            case ErrorPageStatusCodes.UNAUTHORIZED:
                return {
                    heading: customHeading !== null && customHeading !== void 0 ? customHeading : 'Sidan kan inte visas',
                    body: '<p>Du behöver vara inloggad för att kunna se den här sidan. Har du hamnat fel kan du söka på webbplatsen.</p>'
                };
            case ErrorPageStatusCodes.SERVICE_UNAVAILABLE:
                return {
                    heading: customHeading !== null && customHeading !== void 0 ? customHeading : '[Namn på tjänst] är tillfälligt stängd på grund av underhållsarbete',
                    body: '<p>Arbetet planeras att vara klart [datum, månad, år (exempelvis 1 oktober 2024)], [tid (ex kl.09.00)]. Använd länkarna nedan för att komma vidare.</p>'
                };
            case ErrorPageStatusCodes.BLOCKED:
                return {
                    heading: customHeading !== null && customHeading !== void 0 ? customHeading : 'Innehållet blockerat av Arbetsförmedlingen',
                    body: '<p>Om du anser att du behöver tillgång till denna sida [sidans URL] i ditt arbete kan du välja att gå vidare med det, men det kommer att registreras. Har du frågor angående kategoriseringen kontakta ansvarig via e-post.</p>'
                };
            default:
                return {
                    heading: '',
                    body: ''
                };
        }
    }
    getImage() {
        switch (this.afHttpStatusCode) {
            case ErrorPageStatusCodes.UNAUTHORIZED:
                return this.setIllustration('ill-401');
            case ErrorPageStatusCodes.FORBIDDEN:
                return this.setIllustration('ill-403');
            case ErrorPageStatusCodes.NOT_FOUND:
                return this.setIllustration('ill-404');
            case ErrorPageStatusCodes.GONE:
                return this.setIllustration('ill-410');
            case ErrorPageStatusCodes.INTERNAL_SERVER_ERRROR:
                return this.setIllustration('ill-500');
            case ErrorPageStatusCodes.SERVICE_UNAVAILABLE:
                return this.setIllustration('ill-503');
            case ErrorPageStatusCodes.GATEWAY_TIMEOUT:
                return this.setIllustration('ill-504');
            case ErrorPageStatusCodes.BLOCKED:
                return this.setIllustration('ill-blocked');
        }
    }
    render() {
        return (h(Host, { key: '14c20086682d7063de3f6934f5bf911158fda4f6' }, h("digi-layout-container", { key: 'c4c64b46767b9d09194a57a42c8bf15d8c25f09e', class: {
                'digi-notification-error-page': true,
                'digi-notification-error-page--mobile': this.isMobile
            }, id: this.afId }, h("digi-typography", { key: 'a6fda7fac6b1ae009c72299fb0bf92e5bd7e6459' }, h("digi-util-breakpoint-observer", { key: '16ccadf247536c8a3fdacfb3e1ba154683ed45ba', onAfOnChange: (e) => {
                const val = e.detail.value;
                this.isMobile =
                    val === UtilBreakpointObserverBreakpoints.SMALL ||
                        val === UtilBreakpointObserverBreakpoints.MEDIUM;
            } }), h("div", { key: '7931c0c7c4c5be7acd70d684a95b8693f5514500', class: "digi-notification-error-page__grid" }, h("div", { key: '5b420002d35db142d3b569379a1f4a0e25a2cb4e', class: "digi-notification-error-page__picture" }, this.currentIllustration ? (h(this.currentIllustration, null)) : null), h("div", { key: '3ad15060ec7a82de08f38007878a8cc03bacc743', class: "digi-notification-error-page__content" }, h("h1", { key: 'dbbba8c0e56e75af0aa27981a292bf45b491c8e6', class: "digi-notification-error-page__content__heading", tabIndex: -1 }, this.getText().heading), this.hasBodyText ? (h("div", { class: "digi-notification-error-page__content__bodytext" }, h("slot", { name: "bodytext" }))) : (h("div", { class: "digi-notification-error-page__content__bodytext" }, h("div", { innerHTML: this.getText().body }))), this.hasSearch && (h("div", { key: 'ac42089897c8c0066c84f7e754da673070cbd3b4', class: "digi-notification-error-page__content__search" }, h("slot", { key: 'b80647b7010e4e5e7f76a7098c2251477744aad8', name: "search" }))), this.hasLinks && (h("div", { key: '31ab872334d0a3759b796e3f0c69ab3dac3fe643', class: "digi-notification-error-page__content__links" }, h("slot", { key: '2109b3ed5119fbd654e86b3ddbf7ef17d4f2e992', name: "links" })))))))));
    }
    static get is() { return "digi-notification-error-page"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["notification-error-page.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["notification-error-page.css"]
        };
    }
    static get properties() {
        return {
            "afId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Input id attribute. Defaults to random string."
                        }],
                    "text": "S\u00E4tter attributet 'id'. Om inget v\u00E4ljs s\u00E5 skapas ett slumpm\u00E4ssigt id."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-id",
                "reflect": false,
                "defaultValue": "randomIdGenerator('digi-notification-error-page')"
            },
            "afHttpStatusCode": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ErrorPageStatusCodes",
                    "resolved": "ErrorPageStatusCodes.BLOCKED | ErrorPageStatusCodes.FORBIDDEN | ErrorPageStatusCodes.GATEWAY_TIMEOUT | ErrorPageStatusCodes.GONE | ErrorPageStatusCodes.INTERNAL_SERVER_ERRROR | ErrorPageStatusCodes.NOT_FOUND | ErrorPageStatusCodes.SERVICE_UNAVAILABLE | ErrorPageStatusCodes.UNAUTHORIZED",
                    "references": {
                        "ErrorPageStatusCodes": {
                            "location": "import",
                            "path": "./notification-error-page-httpstatus.enum",
                            "id": "src/components/_notification/notification-error-page/notification-error-page-httpstatus.enum.ts::ErrorPageStatusCodes"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Http status code that are supported by our component"
                        }],
                    "text": "Http status kod som supportas av komponenten"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-http-status-code",
                "reflect": false
            },
            "afCustomHeading": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Use custom heading"
                        }],
                    "text": "Anv\u00E4nd f\u00F6r egen rubrik"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-custom-heading",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "hasSearch": {},
            "hasLinks": {},
            "hasBodyText": {},
            "currentIllustration": {},
            "isMobile": {}
        };
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "afCustomHeading",
                "methodName": "getText"
            }];
    }
}
