import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
import { d as defineCustomElement$5 } from './p-Dn3cSDWF.js';
import { d as defineCustomElement$4 } from './p-Bm-eGlq5.js';
import { d as defineCustomElement$3 } from './p-BxvlRqa4.js';
import { d as defineCustomElement$2 } from './p-DdOsLLJc.js';
import { d as defineCustomElement$1 } from './p-B61i82g5.js';

const templateCss = ".react__template-wrapper{display:flex;width:300px;height:200px;border-radius:3px;border:1px solid #ccc}.react__template-wrapper.hide{display:none}.react__template-wrapper:hover{cursor:pointer}.template__page-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.template__page-wrapper .repository__url{text-decoration:none}.input__fields-wrapper{display:flex;flex-direction:column;gap:10px}.details__wrapper{display:flex;flex-direction:column;gap:10px}.selection__buttons-wrapper{display:flex;gap:10px;padding-top:10px;align-items:center}.selection__buttons-wrapper .vue__label{color:#ccc}.selection__buttons-wrapper label:not(.vue__label):hover{cursor:pointer}.selection__buttons-wrapper .selection__input{display:flex;align-items:center;gap:5px}.selection__buttons-wrapper .selection__input input{margin:0;height:20px;width:20px}.selection__buttons-wrapper .selection__input input:hover:not(.vue__input){cursor:pointer}.image__wrapper img{position:relative;width:300px;height:100%;border-radius:3px;object-fit:contain;transition:transform 0.2s}.image__wrapper img:hover{transform:scale(2);top:50px;z-index:100}";

const Template = /*@__PURE__*/ proxyCustomElement(class Template extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.toggleTemplates = createEvent(this, "toggleTemplates", 7);
        this.fieldError = createEvent(this, "fieldError", 7);
        this.repoDetails = { name: "", desc: "", framework: "" };
        this.showDetails = false;
        this.isTemplatePage = false;
        this.isLoading = true;
        this.clientId = 'Ov23lixmXiNTTNb6V5W6';
        this.redirectUri = 'https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development';
        this.scope = 'repo workflow';
        this.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 = Object.assign(Object.assign({}, this.repoDetails), { name: e.target.value });
        }
        else if (type === 'desc') {
            this.repoDetails = Object.assign(Object.assign({}, this.repoDetails), { desc: e.target.value });
        }
        else if (type === 'framework') {
            this.repoDetails = Object.assign(Object.assign({}, 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: '05eceff653bfdbab6627a338ee585a6f3c7a3c07' }, 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"))))));
    }
    get el() { return this; }
    static get style() { return templateCss; }
}, [257, "ifx-template", {
        "name": [1],
        "thumbnail": [1],
        "repoDetails": [32],
        "repoUrl": [32],
        "showDetails": [32],
        "isTemplatePage": [32],
        "isLoading": [32],
        "repoError": [32],
        "toggleTemplate": [64]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ifx-template", "ifx-button", "ifx-icon", "ifx-link", "ifx-spinner", "ifx-text-field"];
    components.forEach(tagName => { switch (tagName) {
        case "ifx-template":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Template);
            }
            break;
        case "ifx-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "ifx-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "ifx-link":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "ifx-spinner":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "ifx-text-field":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { Template as T, defineCustomElement as d };
//# sourceMappingURL=p-DmM40b2X.js.map

//# sourceMappingURL=p-DmM40b2X.js.map