/* eslint-disable max-len */
import { h } from "@stencil/core";
import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
import { FeedbackVariation } from "./tools-feedback-variation.enum";
import { ToolsFeedbackHeadingLevel } from "./tools-feedback-heading-level.enum";
import { ToolsFeedbackType } from "./tools-feedback-type.enum";
import { LayoutBlockVariation } from "../../../components/_layout/layout-block/layout-block-variation.enum";
import { ButtonSize, ButtonVariation } from "../../../enums";
/**
 * @slot form - Kan innehålla vad som helst
 *
 * @enums ToolsFeedbackHeadingLevel - tools-feedback-heading-level.enum.ts
 * @enums FeedbackVariation - tools-feedback-variation.enum.ts
 * @enums ToolsFeedbackType - tools-feedback-type.enum.ts
 *
 * @swedishName Feedback
 */
export class ToolsFeedback {
    constructor() {
        this.afVariation = FeedbackVariation.PRIMARY;
        this.afType = ToolsFeedbackType.FULLWIDTH;
        this.afText = undefined;
        this.afCloseButtonText = 'Stäng';
        this.afHeadingLevel = ToolsFeedbackHeadingLevel.H4;
        this.afFeedback = undefined;
        this.afId = randomIdGenerator('digi-tools-feedback');
        this.afIsDone = false;
        this.currentStep = 1;
    }
    afIsDoneHandler() {
        this.currentStep = 3;
    }
    /**
     * Används för att nollställa.
     * @en Use to reset interaction.
     */
    async afMReset() {
        this.currentStep = 1;
    }
    /**
     * Används för att ändra steg mellan 1-3.
     * @en Use to change step between 1-3
     * @ignore
     */
    async afMSetStep(step) {
        this.currentStep = step;
    }
    get cssModifiers() {
        return {
            'digi-tools-feedback--primary': this.afVariation === FeedbackVariation.PRIMARY,
            'digi-tools-feedback--secondary': this.afVariation === FeedbackVariation.SECONDARY,
            'digi-tools-feedback--step-one': this.currentStep === 1,
            'digi-tools-feedback--step-two': this.currentStep === 2,
            'digi-tools-feedback--step-three': this.currentStep === 3,
            'digi-tools-feedback--fullwidth': this.afType === ToolsFeedbackType.FULLWIDTH,
            'digi-tools-feedback--grid': this.afType === ToolsFeedbackType.GRID
        };
    }
    get icon() {
        return (h("svg", { class: "digi-tools-feedback__container-header-icon", "aria-hidden": "true", viewBox: "0 0 60 48", version: "1.1", width: "58", height: "48" }, h("title", null, "Chat"), h("g", { id: "Mainpage", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { id: "\u00D6versikt-moduler-feedback-design-v1", transform: "translate(-1121.000000, -1074.000000)" }, h("g", { id: "Group-27-Copy-2", transform: "translate(1122.000000, 1075.000000)" }, h("path", { d: "M31.3351987,35.0796454 C31.3351987,37.3388621 33.1498711,39.1874113 35.3679732,39.1874113 L43.2325677,39.1874113 L49.7962813,44.9840831 L49.7962813,39.1874113 L52.6602616,39.1874113 C54.8781464,39.1874113 56.6928188,37.3388621 56.6928188,35.0796454 L56.6928188,17.9415266 C56.6928188,15.6820918 54.8781464,13.8335426 52.6602616,13.8335426 L37.4687612,13.8335426 C37.4687612,13.8335426 37.5319804,25.5217561 37.5319804,27.0499279 C37.5319804,28.5778817 36.1843911,32.189488 31.3351987,32.189488 C31.3043495,34.4120652 31.3351987,35.0796454 31.3351987,35.0796454", id: "Fill-1", class: "digi-tools-feedback__infographic-secondary" }), h("path", { d: "M38.1172465,13.8645553 L53.9081341,13.8645553 C56.158606,13.8645553 58,15.7131045 58,17.9723213 L58,36.0955623 C58,38.3547791 56.158606,40.2033283 53.9081341,40.2033283 L51.0022249,40.2033283 L51.0022249,46 L44.341836,40.2033283 L36.3618827,40.2033283 C34.1111935,40.2033283 32.2697995,38.3547791 32.2697995,36.0955623 L32.2697995,32.521904", id: "Stroke-3", stroke: "#333333", "stroke-width": "1.296", "stroke-linejoin": "round" }), h("g", { id: "Group-8" }, h("path", { d: "M38.1172465,13.8645553 L38.1172465,5.18012517 C38.1172465,2.35604969 35.815504,0.0453631709 33.0023598,0.0453631709 L33.0251708,0 L5.11488673,0 C2.30174248,0 0,2.31068652 0,5.134762 L0,27.387142 C0,30.2112175 2.30174248,32.521904 5.11488673,32.521904 L9.88217668,32.521904 L9.88217668,43.3905272 L20.0617659,32.521904 L33.0023598,32.521904 C35.815504,32.521904 38.1172465,30.2112175 38.1172465,27.387142 L38.1172465,13.8143941", id: "Fill-5", fill: "#FFFFFF" }), h("path", { d: "M38.1172465,13.8645553 L38.1172465,5.18012517 C38.1172465,2.35604969 35.815504,0.0453631709 33.0023598,0.0453631709 L33.0251708,0 L5.11488673,0 C2.30174248,0 0,2.31068652 0,5.134762 L0,27.387142 C0,30.2112175 2.30174248,32.521904 5.11488673,32.521904 L9.88217668,32.521904 L9.88217668,43.3905272 L20.0617659,32.521904 L33.0023598,32.521904 C35.815504,32.521904 38.1172465,30.2112175 38.1172465,27.387142 L38.1172465,13.8143941", id: "Stroke-7", stroke: "#333333", "stroke-width": "1.296", "stroke-linejoin": "round" })), h("line", { x1: "28.4671558", y1: "9.19912763", x2: "9.71648163", y2: "9.19912763", id: "Stroke-9", stroke: "#333333", "stroke-width": "1.296", "stroke-linejoin": "round" }), h("line", { x1: "51.0653789", y1: "23.3170842", x2: "47.8731369", y2: "23.3170842", id: "Stroke-11", stroke: "#333333", "stroke-width": "1.296", "stroke-linejoin": "round" }), h("line", { x1: "46.5029755", y1: "23.3170842", x2: "43.3107335", y2: "23.3170842", id: "Stroke-13", stroke: "#333333", "stroke-width": "1.296", "stroke-linejoin": "round" }), h("line", { x1: "41.9405939", y1: "23.3170842", x2: "38.7483519", y2: "23.3170842", id: "Stroke-15", stroke: "#333333", "stroke-width": "1.296", "stroke-linejoin": "round" }), h("line", { x1: "51.0653789", y1: "27.7662735", x2: "46.4946984", y2: "27.7662735", id: "Stroke-17", stroke: "#333333", "stroke-width": "1.296", "stroke-linejoin": "round" }), h("line", { x1: "43.2358916", y1: "27.7662735", x2: "38.4564358", y2: "27.7662735", id: "Stroke-19", stroke: "#333333", "stroke-width": "1.296", "stroke-linejoin": "round" }), h("line", { x1: "28.4671558", y1: "13.9050986", x2: "9.71648163", y2: "13.9050986", id: "Stroke-21", stroke: "#333333", "stroke-width": "1.296", "stroke-linejoin": "round" }), h("line", { x1: "28.4671558", y1: "18.6110914", x2: "9.71648163", y2: "18.6110914", id: "Stroke-23", stroke: "#333333", "stroke-width": "1.296", "stroke-linejoin": "round" }), h("line", { x1: "21.4671558", y1: "23.3170842", x2: "9.72", y2: "23.3170842", id: "Stroke-25", stroke: "#333333", "stroke-width": "1.296", "stroke-linejoin": "round" }))))));
    }
    get responseIcon() {
        return (h("svg", { class: "digi-tools-feedback__container-header-icon", "aria-hidden": "true", version: "1.1", viewBox: "0 0 35 29", width: "31", height: "25" }, h("title", null, "Check mark"), h("g", { fill: "none", "fill-rule": "evenodd" }, h("g", { transform: "translate(-170 -32)" }, h("g", { transform: "translate(170 32.325)" }, h("g", { transform: "translate(0 .77495)" }, h("mask", { id: "b", fill: "white" }, h("polygon", { points: "0 0 26.685 0 26.685 27.689 0 27.689" })), h("path", { d: "m13.711 27.689c-7.5602 0-13.711-6.2103-13.711-13.844 0-7.6345 6.151-13.845 13.711-13.845 3.1693 0 6.2611 1.1179 8.7048 3.1478l-1.5894 1.9509c-1.9972-1.6592-4.5241-2.5724-7.1155-2.5724-6.181 0-11.209 5.0773-11.209 11.319 0 6.2406 5.0283 11.318 11.209 11.318 4.7924 0 9.0551-3.0733 10.607-7.6478l2.3668 0.81853c-1.8983 5.5958-7.1124 9.3556-12.974 9.3556", fill: "#333", mask: "url(#b)" })), h("g", { transform: "translate(4.2177)" }, h("mask", { id: "a", fill: "white" }, h("polygon", { points: "0 0 30.425 0 30.425 23.496 0 23.496" })), h("path", { d: "m30.191 3.2545-19.95 20.007c-0.31227 0.31253-0.81758 0.31253-1.1292 0l-8.878-8.9033c-0.31164-0.31316-0.31164-0.81992 0-1.1324l1.8818-1.8878c0.31164-0.31253 0.81758-0.31253 1.1292 0l6.4315 6.4499 17.504-17.553c0.31164-0.31316 0.81695-0.31316 1.1292 0l1.8818 1.8872c0.31164 0.31253 0.31164 0.81929 0 1.1324", class: "digi-tools-feedback__infographic-primary", mask: "url(#a)" })))))));
    }
    get content() {
        return (h("div", null, this.currentStep === 1 && (h("div", { class: "digi-tools-feedback__container" }, h("div", { class: "digi-tools-feedback__container-header" }, this.icon, h(this.afHeadingLevel, { class: "digi-tools-feedback__container-header-title" }, this.afText)), h("div", { class: "digi-tools-feedback__container-btns" }, h("digi-button", { "af-size": ButtonSize.MEDIUM, "af-variation": ButtonVariation.SECONDARY, "af-full-width": "false", onAfOnClick: () => {
                this.currentStep = 3;
            } }, "Ja"), h("digi-button", { "af-size": ButtonSize.MEDIUM, "af-variation": ButtonVariation.SECONDARY, "af-full-width": "false", onAfOnClick: () => {
                this.currentStep = 2;
            } }, "Nej")))), this.currentStep === 2 && (h("div", { class: "digi-tools-feedback__container" }, h("div", { class: "digi-tools-feedback__container-header" }, ' ', this.icon, h("div", { class: "digi-tools-feedback__container-header-title" }, "Hur kan vi bli b\u00E4ttre?")))), h("div", { class: "digi-tools-feedback__container-forms" }, h("slot", { name: "form" })), this.currentStep === 3 && (h("div", { class: "digi-tools-feedback__container-header" }, this.responseIcon, h("div", { class: "digi-tools-feedback__container-header-title" }, "Tack f\u00F6r din \u00E5terkoppling!")))));
    }
    componentDidLoad() {
        this.afOnReady.emit();
    }
    render() {
        return (h("div", { key: '4a1b443ece43d7fbb08737610d76db5408e46b9d', class: Object.assign({ 'digi-tools-feedback': true }, this.cssModifiers) }, this.afType === ToolsFeedbackType.FULLWIDTH && (h("digi-layout-block", { key: 'c9dcaae2ef5c7cb2c502891f1c3dc3f86529467a', afVariation: LayoutBlockVariation.TRANSPARENT }, this.content)), this.afType !== ToolsFeedbackType.FULLWIDTH && this.content));
    }
    static get is() { return "digi-tools-feedback"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["tools-feedback.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["tools-feedback.css"]
        };
    }
    static get properties() {
        return {
            "afVariation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "FeedbackVariation",
                    "resolved": "FeedbackVariation.PRIMARY | FeedbackVariation.SECONDARY",
                    "references": {
                        "FeedbackVariation": {
                            "location": "import",
                            "path": "./tools-feedback-variation.enum",
                            "id": "src/components/_tools/tools-feedback/tools-feedback-variation.enum.ts::FeedbackVariation"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Sets the variation of the feedback."
                        }],
                    "text": "S\u00E4tter variant. Kan vara 'prim\u00E4r' eller 'sekund\u00E4r'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-variation",
                "reflect": false,
                "defaultValue": "FeedbackVariation.PRIMARY"
            },
            "afType": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ToolsFeedbackType",
                    "resolved": "ToolsFeedbackType.FULLWIDTH | ToolsFeedbackType.GRID",
                    "references": {
                        "ToolsFeedbackType": {
                            "location": "import",
                            "path": "./tools-feedback-type.enum",
                            "id": "src/components/_tools/tools-feedback/tools-feedback-type.enum.ts::ToolsFeedbackType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set card type. Can be 'fullwidth' or 'grid'."
                        }],
                    "text": "S\u00E4tter typ p\u00E5 kortet. Kan vara 'fullwidth' eller 'grid'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-type",
                "reflect": false,
                "defaultValue": "ToolsFeedbackType.FULLWIDTH"
            },
            "afText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "The label on the question"
                        }],
                    "text": "Texten p\u00E5 fr\u00E5gan"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-text",
                "reflect": false
            },
            "afCloseButtonText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Show close button"
                        }],
                    "text": "Visa st\u00E4ng-knapp"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-close-button-text",
                "reflect": false,
                "defaultValue": "'St\u00E4ng'"
            },
            "afHeadingLevel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ToolsFeedbackHeadingLevel",
                    "resolved": "ToolsFeedbackHeadingLevel.H1 | ToolsFeedbackHeadingLevel.H2 | ToolsFeedbackHeadingLevel.H3 | ToolsFeedbackHeadingLevel.H4 | ToolsFeedbackHeadingLevel.H5 | ToolsFeedbackHeadingLevel.H6",
                    "references": {
                        "ToolsFeedbackHeadingLevel": {
                            "location": "import",
                            "path": "./tools-feedback-heading-level.enum",
                            "id": "src/components/_tools/tools-feedback/tools-feedback-heading-level.enum.ts::ToolsFeedbackHeadingLevel"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set text level (h1-h6)"
                        }],
                    "text": "S\u00E4tter textens vikt (h1-h6)"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-heading-level",
                "reflect": false,
                "defaultValue": "ToolsFeedbackHeadingLevel.H4"
            },
            "afFeedback": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "The label on the feedback"
                        }],
                    "text": "Texten p\u00E5 feedback"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-feedback",
                "reflect": false
            },
            "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-tools-feedback')"
            },
            "afIsDone": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "If true, a response message  will show thanking the user for sharing that the page was helpful"
                        }],
                    "text": "G\u00F6r det m\u00F6jligt att visa ett tack-meddelande som visas n\u00E4r anv\u00E4ndaren har delat med sig av feedback."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-is-done",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "currentStep": {}
        };
    }
    static get events() {
        return [{
                "method": "afOnReady",
                "name": "afOnReady",
                "bubbles": false,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "When the component and slots are loaded and initialized this event will trigger."
                        }],
                    "text": "N\u00E4r komponenten och slotsen \u00E4r laddade och initierade s\u00E5 skickas detta eventet."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "afMReset": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Anv\u00E4nds f\u00F6r att nollst\u00E4lla.",
                    "tags": [{
                            "name": "en",
                            "text": "Use to reset interaction."
                        }]
                }
            },
            "afMSetStep": {
                "complexType": {
                    "signature": "(step: 1 | 2 | 3) => Promise<void>",
                    "parameters": [{
                            "name": "step",
                            "type": "1 | 2 | 3",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Anv\u00E4nds f\u00F6r att \u00E4ndra steg mellan 1-3.",
                    "tags": [{
                            "name": "en",
                            "text": "Use to change step between 1-3"
                        }, {
                            "name": "ignore",
                            "text": undefined
                        }]
                }
            }
        };
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "afIsDone",
                "methodName": "afIsDoneHandler"
            }];
    }
}
