'use strict';

var index = require('./index-B2lA-USD.js');
var jsSdk = require('@verdocs/js-sdk');
var errors = require('./errors-D1XRvnet.js');
var Datastore = require('./Datastore-CIzsoGWH.js');

const verdocsBuildCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-build{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-build .content{-ms-flex:1;flex:1;gap:20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column}verdocs-build verdocs-template-attachments,verdocs-build verdocs-template-roles{margin:20px}verdocs-build verdocs-template-fields{border-top:1px solid #777777}verdocs-build verdocs-template-attachments{padding:20px;background:#ffffff}verdocs-build verdocs-template-fields{width:100%}verdocs-build verdocs-preview{-ms-flex:1;flex:1}verdocs-build .preview-container{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;width:100%;background-color:#eeeeee;max-height:100%}@media all and (max-width: 450px){verdocs-build .preview-container{-ms-flex-direction:column;flex-direction:column}}verdocs-build .preview-send-wrapper{display:-ms-flexbox;display:flex;-ms-flex:0 0 300px;flex:0 0 300px;background-color:#ffffff;-webkit-box-shadow:1px 1px 6px -2px rgba(0, 0, 0, 0.4980392157);box-shadow:1px 1px 6px -2px rgba(0, 0, 0, 0.4980392157)}@media all and (max-width: 450px){verdocs-build .preview-send-wrapper{-ms-flex:0;flex:0}}verdocs-build .preview-preview-wrapper{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;overflow-y:scroll}";

const VerdocsBuild = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.cancel = index.createEvent(this, "cancel");
        this.sdkError = index.createEvent(this, "sdkError");
        this.stepChanged = index.createEvent(this, "stepChanged");
        this.send = index.createEvent(this, "send");
        this.templateUpdated = index.createEvent(this, "templateUpdated");
        this.templateCreated = index.createEvent(this, "templateCreated");
        this.rolesUpdated = index.createEvent(this, "rolesUpdated");
        this.templateListenerId = null;
        /**
         * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
         */
        this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
        /**
         * The ID of the template to create the document from. Unlike most other components, this is an optional parameter here.
         * If the template ID is known, `step` may also be specified to force displaying a specific step in the creation process.
         * If it is not specified, `step` will be ignored and the create step will be shown.
         */
        this.templateId = null;
        /**
         * The step in the creation process to display.
         */
        this.step = 'preview';
        this.loading = true;
        this.template = null;
    }
    onTemplateIdChanged(newTemplateId, oldTemplateId) {
        if (!oldTemplateId && newTemplateId && this.step === 'attachments') {
            this.step = 'preview';
        }
        this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
    }
    onStepChanged() {
        // We reload the template here even if only the step changed in case
        // we were out of sync before
        this.loadTemplate(this.templateId).catch((e) => console.log('Unknown Error', e));
    }
    async componentWillLoad() {
        var _a, _b, _c, _d, _e, _f;
        try {
            this.endpoint.loadSession();
            if (!this.endpoint.session) {
                console.log('[BUILD] Unable to start builder session, must be authenticated');
                return;
            }
            if (!this.templateId) {
                console.log(`[BUILD] No template ID, activating upload mode`);
                this.step = 'attachments';
                this.loading = false;
                return;
            }
            try {
                this.loadTemplate(this.templateId).catch(e => console.log('[BUILD] Unable to load template', e));
            }
            catch (e) {
                console.log('[BUILD] Error loading template', e);
                (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
            }
        }
        catch (e) {
            console.log('[BUILD] Error with builder session', e);
            (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new errors.SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
        }
    }
    async loadTemplate(templateId) {
        if (templateId) {
            Datastore.Store.subscribe('templates', this.templateId, () => jsSdk.getTemplate(this.endpoint, this.templateId), false, (template) => {
                this.template = template;
                this.loading = false;
            });
        }
    }
    disconnectedCallback() {
        console.log('[BUILD] Disconnected');
        this.unlistenToTemplate();
    }
    unlistenToTemplate() {
        if (this.templateListenerId) {
            Datastore.Store.store.delListener(this.templateListenerId);
            this.templateListenerId = null;
        }
    }
    handleCancel() {
        var _a;
        this.step = 'preview';
        (_a = this.cancel) === null || _a === void 0 ? void 0 : _a.emit();
    }
    async handleTemplateCreated(templateId) {
        var _a;
        await this.loadTemplate(templateId);
        this.templateId = templateId;
        this.step = 'roles';
        (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit('roles');
    }
    async handleRolesUpdated(e) {
        var _a;
        (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
    }
    async handleTemplateUpdated(e) {
        var _a;
        (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
    }
    handleAttachmentsNext() {
        var _a;
        this.step = 'roles';
        (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit('roles');
    }
    handleRolesNext() {
        var _a;
        this.step = 'fields';
        (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit('fields');
    }
    handleStepChanged(step) {
        var _a;
        this.step = step;
        (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit(step);
    }
    render() {
        if (this.loading) {
            return (index.h(index.Host, { class: "loading" }, index.h("verdocs-loader", null)));
        }
        if (!this.endpoint.session) {
            return (index.h(index.Host, null, index.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
        }
        return (index.h(index.Host, null, index.h("div", { class: "content" }, index.h("verdocs-template-build-tabs", { endpoint: this.endpoint, templateId: this.templateId, step: this.step, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, onStepChanged: e => this.handleStepChanged(e.detail) }), this.step === 'attachments' && (index.h("verdocs-template-attachments", { templateId: this.templateId, endpoint: this.endpoint, onExit: () => this.handleCancel(), onNext: () => this.handleAttachmentsNext(), onTemplateUpdated: e => this.handleTemplateUpdated(e) })), this.step === 'roles' && (index.h("verdocs-template-roles", { templateId: this.templateId, endpoint: this.endpoint, onExit: () => this.handleCancel(), onNext: () => this.handleRolesNext(), onRolesUpdated: e => this.handleRolesUpdated(e) })), this.step === 'settings' && index.h("verdocs-template-settings", { templateId: this.templateId, endpoint: this.endpoint, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), this.step === 'fields' && index.h("verdocs-template-fields", { templateId: this.templateId, endpoint: this.endpoint, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), this.step === 'preview' && (index.h("div", { class: "preview-container" }, index.h("div", { class: "preview-send-wrapper" }, index.h("verdocs-send", { templateId: this.templateId, endpoint: this.endpoint, onSend: e => { var _a; return (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, style: { width: '100%' } })), index.h("div", { class: "preview-preview-wrapper" }, index.h("verdocs-preview", { templateId: this.templateId, endpoint: this.endpoint, style: { display: 'flex', flex: '1', maxWidth: '1000px' } })))))));
    }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "templateId": ["onTemplateIdChanged"],
        "step": ["onStepChanged"]
    }; }
};
VerdocsBuild.style = verdocsBuildCss;

exports.verdocs_build = VerdocsBuild;
//# sourceMappingURL=verdocs-build.entry.cjs.js.map

//# sourceMappingURL=verdocs-build.cjs.entry.js.map