import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-AiOs8RvA.js';
import { VerdocsEndpoint, getTemplate, updateTemplate } from '@verdocs/js-sdk';
import { V as VerdocsToast } from './p-CyvDgtoV.js';
import { S as SDKError } from './p-C1sRVZWv.js';
import { S as Store } from './p-DoY8Nb0Y.js';
import { d as defineCustomElement$7 } from './p-DMVmShTi.js';
import { d as defineCustomElement$6 } from './p-Bk16Ytky.js';
import { d as defineCustomElement$5 } from './p-Bbomvxyl.js';
import { d as defineCustomElement$4 } from './p-I7r_G5nS.js';
import { d as defineCustomElement$3 } from './p-Cs2yaGJp.js';
import { d as defineCustomElement$2 } from './p-CEzpxDIH.js';
import { d as defineCustomElement$1 } from './p-xz67XcVg.js';

const verdocsTemplateSettingsCss = "@-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-template-settings{display:block;max-width:600px;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-settings>form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;padding:12px}verdocs-template-settings>form h5{font-size:16px;font-weight:bold;color:#46497d;margin:0 0 10px 0}verdocs-template-settings>form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-template-settings>form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-settings>form input:focus{outline:none}verdocs-template-settings>form .row{margin:20px 0 0 0}verdocs-template-settings .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-template-settings ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-settings ::-moz-placeholder{color:#aaaaaa}verdocs-template-settings :-ms-input-placeholder{color:#aaaaaa}verdocs-template-settings ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-settings ::placeholder{color:#aaaaaa}";

const MS_PER_DAY = 24 * 60 * 60 * 1000;
const VerdocsTemplateSettings = /*@__PURE__*/ proxyCustomElement(class VerdocsTemplateSettings extends H {
    constructor() {
        super();
        this.__registerHost();
        this.next = createEvent(this, "next");
        this.exit = createEvent(this, "exit");
        this.sdkError = createEvent(this, "sdkError");
        this.templateUpdated = createEvent(this, "templateUpdated");
        this.templateListenerId = null;
        /**
         * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
         */
        this.endpoint = VerdocsEndpoint.getDefault();
        /**
         * The template ID to edit.
         */
        this.templateId = '';
        this.name = null;
        this.visibility = 'private';
        this.sender = 'envelope_creator';
        this.sendReminders = false;
        this.initialReminder = 0;
        this.followupReminders = 0;
        this.dirty = false;
        this.loading = true;
        this.template = null;
    }
    disconnectedCallback() {
        this.unlistenToTemplate();
    }
    async listenToTemplate() {
        console.log('[SETTINGS] Loading template', this.templateId);
        this.unlistenToTemplate();
        Store.subscribe('templates', this.templateId, () => getTemplate(this.endpoint, this.templateId), false, (template) => {
            console.log('[SETTINGS] Template Updated', template);
            this.template = template;
            this.name = template.name;
            this.visibility = template.visibility;
            this.sender = template.sender;
            this.sendReminders = template.initial_reminder !== null;
            this.initialReminder = template.initial_reminder ? Math.floor(template.initial_reminder / MS_PER_DAY) : null;
            this.followupReminders = template.followup_reminders ? Math.floor(template.followup_reminders / MS_PER_DAY) : null;
            this.dirty = false;
            this.loading = false;
        });
    }
    unlistenToTemplate() {
        if (this.templateListenerId) {
            Store.store.delListener(this.templateListenerId);
            this.templateListenerId = null;
        }
    }
    async componentWillLoad() {
        var _a, _b, _c;
        try {
            this.endpoint.loadSession();
            if (!this.templateId) {
                console.log(`[SETTINGS] Missing required template ID ${this.templateId}`);
                return;
            }
            if (!this.endpoint.session) {
                console.log('[SETTINGS] Unable to start builder session, must be authenticated');
                return;
            }
            this.listenToTemplate();
        }
        catch (e) {
            console.log('[SETTINGS] Error with preview session', e);
            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new 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));
        }
    }
    handleCancel() {
        var _a;
        (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
    }
    handleSubmit() {
        updateTemplate(this.endpoint, this.templateId, {
            name: this.name,
            visibility: this.visibility,
            sender: this.sender,
            initial_reminder: this.sendReminders ? this.initialReminder * MS_PER_DAY : null,
            followup_reminders: this.sendReminders ? this.followupReminders * MS_PER_DAY : null,
        })
            .then(template => {
            var _a, _b;
            console.log('[SETTINGS] Template Updated', template);
            this.dirty = false;
            this.name = template.name;
            this.visibility = template.visibility;
            this.sender = template.sender;
            this.sendReminders = template.initial_reminder !== null;
            this.initialReminder = template.initial_reminder ? Math.floor(template.initial_reminder / MS_PER_DAY) : null;
            this.followupReminders = template.followup_reminders ? Math.floor(template.followup_reminders / MS_PER_DAY) : null;
            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template, event: 'update' });
            (_b = this.next) === null || _b === void 0 ? void 0 : _b.emit();
        })
            .catch(e => {
            var _a, _b, _c, _d, _e;
            console.log('[SETTINGS] Error updating template', e);
            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new 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));
            VerdocsToast(((_e = (_d = e.response) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.error) || 'Error updating template, please try again later.');
        });
    }
    render() {
        if (!this.endpoint.session) {
            return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
        }
        if (this.loading || !this.template) {
            return (h(Host, { class: "loading" }, h("verdocs-loader", null)));
        }
        return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Settings"), h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-name", label: "Template Name", value: this.name, autocomplete: "off", placeholder: "Template Name...", onInput: (e) => {
                this.name = e.target.value;
                this.dirty = true;
            } })), h("div", { class: "row" }, h("verdocs-select-input", { label: "Visibility", value: this.visibility, onInput: (e) => {
                this.visibility = e.target.value;
                this.dirty = true;
            }, options: [
                { value: 'private', label: 'Private' },
                { value: 'shared', label: 'Shared' },
                { value: 'public', label: 'Public' },
            ] })), h("div", { class: "row" }, h("verdocs-select-input", { label: "Owner for envelopes created from this template", value: this.sender, onInput: (e) => {
                this.sender = e.target.value;
                this.dirty = true;
            }, options: [
                { value: 'envelope_creator', label: 'Envelope Creator' },
                { value: 'template_owner', label: 'Template Owner' },
            ] })), h("div", { class: "row" }, h("label", null, "Send Reminders"), h("verdocs-switch", { checked: this.sendReminders, onCheckedChange: e => (this.sendReminders = e.detail) })), this.sendReminders && (h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-name", label: "First Reminder (days)", value: String(this.initialReminder || 0), autocomplete: "off", placeholder: "Delay in days...", onInput: (e) => {
                this.initialReminder = +e.target.value;
                this.dirty = true;
            } }))), this.sendReminders && (h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-name", label: "Follow-up Reminders (days)", value: String(this.followupReminders || 0), autocomplete: "off", placeholder: "Delay in days...", onInput: (e) => {
                this.followupReminders = +e.target.value;
                this.dirty = true;
            } }))), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: () => this.handleCancel() }), h("verdocs-button", { label: "Save", size: "small", onClick: () => this.handleSubmit(), disabled: !this.dirty })))));
    }
    get el() { return this; }
    static get style() { return verdocsTemplateSettingsCss; }
}, [0, "verdocs-template-settings", {
        "endpoint": [16],
        "templateId": [1, "template-id"],
        "name": [32],
        "visibility": [32],
        "sender": [32],
        "sendReminders": [32],
        "initialReminder": [32],
        "followupReminders": [32],
        "dirty": [32],
        "loading": [32],
        "template": [32]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["verdocs-template-settings", "verdocs-button", "verdocs-component-error", "verdocs-help-icon", "verdocs-loader", "verdocs-select-input", "verdocs-switch", "verdocs-text-input"];
    components.forEach(tagName => { switch (tagName) {
        case "verdocs-template-settings":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, VerdocsTemplateSettings);
            }
            break;
        case "verdocs-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$7();
            }
            break;
        case "verdocs-component-error":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "verdocs-help-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "verdocs-loader":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "verdocs-select-input":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "verdocs-switch":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "verdocs-text-input":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { VerdocsTemplateSettings as V, defineCustomElement as d };
//# sourceMappingURL=p-DQwTFMuo.js.map

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