import { h, } from "@stencil/core";
export class Template {
    el;
    repoDetails = {
        name: "",
        desc: "",
        framework: "",
    };
    repoUrl;
    showDetails = false;
    isTemplatePage = false;
    isLoading = true;
    repoError;
    name;
    toggleTemplates;
    fieldError;
    thumbnail;
    clientId = "Ov23lixmXiNTTNb6V5W6";
    redirectUri = "https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development";
    scope = "repo workflow";
    state = "template123";
    authUser() {
        const authorizationUrl = `https://github.com/login/oauth/authorize?` +
            `client_id=${this.clientId}&` +
            `redirect_uri=${this.redirectUri}&` +
            `scope=${this.scope}&` +
            `state=${this.state}`;
        window.open(authorizationUrl, "_blank");
    }
    componentDidLoad() {
        const url = new URL(window.location.href);
        const code = url.searchParams.get("code");
        const { templateName } = this.getLocalStorageValues();
        if (code && this.name === templateName) {
            this.isTemplatePage = true;
            this.toggleTemplates.emit("details");
            this.getUserToken(code);
        }
    }
    getLocalStorageValues() {
        const repoName = localStorage.getItem("repo_name");
        const repoDesc = localStorage.getItem("repo_desc");
        const repoFramework = localStorage.getItem("repo_framework");
        const templateName = localStorage.getItem("selectedTemplate");
        return { repoName, repoDesc, repoFramework, templateName };
    }
    async getUserToken(authCode) {
        const { repoName, repoDesc, repoFramework, templateName } = this.getLocalStorageValues();
        fetch(`https://ddstemplate-srv.cfapps.eu10-004.hana.ondemand.com/token/${authCode}/${repoName}/${repoDesc}/${repoFramework}/${templateName}`)
            .then((response) => {
            if (response.ok) {
                return response.text();
            }
            else {
                return response.text().then((errorMessage) => {
                    throw new Error(errorMessage);
                });
            }
        })
            .then((data) => {
            if (data) {
                this.isLoading = false;
                this.repoUrl = data;
                localStorage.clear();
            }
        })
            .catch((error) => {
            this.repoError = error.message;
            console.error("Error:", error.message);
        });
    }
    handleUserInput(e, type) {
        if (type === "name") {
            this.repoDetails = { ...this.repoDetails, name: e.target.value };
        }
        else if (type === "desc") {
            this.repoDetails = { ...this.repoDetails, desc: e.target.value };
        }
        else if (type === "framework") {
            this.repoDetails = { ...this.repoDetails, framework: e.target.value };
        }
    }
    submitUserData() {
        if (this.repoDetails.name &&
            this.repoDetails.desc &&
            this.repoDetails.framework) {
            localStorage.setItem("repo_name", this.repoDetails.name);
            localStorage.setItem("repo_desc", this.repoDetails.desc);
            localStorage.setItem("repo_framework", this.repoDetails.framework);
            localStorage.setItem("selectedTemplate", this.name);
            this.fieldError.emit(false);
            this.authUser();
        }
        else {
            this.fieldError.emit("All fields are mandatory");
        }
    }
    togglePadding(action) {
        let parent = this.el.parentElement;
        if (parent) {
            const rootNode = parent.getRootNode();
            if (rootNode instanceof ShadowRoot) {
                parent = rootNode.host.parentElement;
            }
            else {
                parent = parent.parentElement;
            }
            if (action === "remove") {
                parent.parentElement.style.padding = "0px";
            }
            else if (action === "add") {
                parent.parentElement.style.padding = "4rem 20px";
            }
        }
    }
    handleCurrentTemplate(e) {
        if (e && !this.showDetails) {
            this.togglePadding("remove");
            const targetTemplate = e.currentTarget;
            this.toggleTemplates.emit(targetTemplate);
            this.showDetails = true;
        }
    }
    async toggleTemplate(currTemp) {
        const templateWrapper = this.el.shadowRoot.querySelector(".react__template-wrapper");
        if (templateWrapper) {
            if (!templateWrapper.classList.contains("hide") && currTemp) {
                if (templateWrapper !== currTemp) {
                    templateWrapper.classList.add("hide");
                }
            }
            else {
                if (this.showDetails) {
                    this.showDetails = false;
                }
                this.togglePadding("add");
                templateWrapper.classList.remove("hide");
            }
        }
    }
    render() {
        return (h("div", { key: '91d0c0a01d76bbc7ec0a67fb01c0efb782a3ff37' }, this.isTemplatePage ? (h("div", { class: "template__page-wrapper" }, !this.repoUrl && !this.repoError && (h("div", null, h("h3", null, "Your repository is getting ready.."), h("p", null, "This will only take a minute."))), this.isLoading && !this.repoError && (h("div", null, h("ifx-spinner", { variant: "default", size: "s" }))), this.repoUrl && (h("ifx-link", { href: this.repoUrl, target: "_parent", size: "m", variant: "underlined" }, "Your repository")), this.repoError && h("div", null, this.repoError))) : (h("div", { class: "react__template-container" }, h("div", { class: "react__template-wrapper", onClick: (e) => this.handleCurrentTemplate(e) }, h("div", { class: "image__wrapper" }, h("img", { src: this.thumbnail }))), this.showDetails && (h("div", { class: "details__wrapper" }, h("div", { class: "selection__buttons-wrapper" }, h("div", { class: "selection__input" }, h("input", { type: "radio", id: "react", name: "chosen_framework", value: "react", onInput: (e) => this.handleUserInput(e, "framework") }), h("label", { htmlFor: "react" }, "React")), h("div", { class: "selection__input vue" }, h("input", { class: "vue__input", disabled: true, type: "radio", id: "vue", name: "chosen_framework", value: "vue", onInput: (e) => this.handleUserInput(e, "framework") }), h("label", { class: "vue__label", htmlFor: "vue" }, "Vue"), " ", "(Soon)")), h("div", { class: "input__fields-wrapper" }, h("ifx-text-field", { required: true, onInput: (e) => this.handleUserInput(e, "name"), size: "m", icon: "c-info-16", placeholder: "Your repository name" }, "Repository Name"), h("ifx-text-field", { required: true, size: "m", icon: "c-info-16", onInput: (e) => this.handleUserInput(e, "desc"), placeholder: "Your repository description" }, "Repository Description"), h("ifx-button", { fullWidth: true, onClick: () => this.submitUserData(), variant: "primary" }, "Generate template"))))))));
    }
    static get is() { return "ifx-template"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["template.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["template.css"]
        };
    }
    static get properties() {
        return {
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            },
            "thumbnail": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "thumbnail"
            }
        };
    }
    static get states() {
        return {
            "repoDetails": {},
            "repoUrl": {},
            "showDetails": {},
            "isTemplatePage": {},
            "isLoading": {},
            "repoError": {}
        };
    }
    static get events() {
        return [{
                "method": "toggleTemplates",
                "name": "toggleTemplates",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "fieldError",
                "name": "fieldError",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "toggleTemplate": {
                "complexType": {
                    "signature": "(currTemp: any) => Promise<void>",
                    "parameters": [{
                            "name": "currTemp",
                            "type": "any",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=template.js.map
