import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CUAGH_8P.js';
import { VerdocsEndpoint, getTemplate, updateTemplateRole, deleteTemplateRole, isValidEmail } from '@verdocs/js-sdk';
import { S as SDKError } from './p-C1sRVZWv.js';
import { S as Store } from './p-bS8INhRF.js';
import { d as defineCustomElement$4 } from './p-CwklHveG.js';
import { d as defineCustomElement$3 } from './p-BCKfiFng.js';
import { d as defineCustomElement$2 } from './p-Cd0WoTsM.js';
import { d as defineCustomElement$1 } from './p-764zY_TM.js';

const verdocsTemplateRolePropertiesCss = "verdocs-template-role-properties{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-template-role-properties div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-role-properties .heading{display:-ms-flexbox;display:flex;font-size:20px;font-weight:500;-ms-flex-direction:row;flex-direction:row}verdocs-template-role-properties .buttons{display:-ms-flexbox;display:flex;margin-top:10px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}verdocs-template-role-properties .buttons verdocs-button{margin-left:16px}verdocs-template-role-properties form{gap:15px;padding:20px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-role-properties form .instructions{margin:7px 0 0 0;font-size:12px;font-style:italic}verdocs-template-role-properties form .input-label{display:block;font-size:14px;-ms-flex:0 0 100px;flex:0 0 100px;font-weight:700;margin:0 0 4px 0;color:#555570}verdocs-template-role-properties form .first-last{gap:15px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-template-role-properties form verdocs-help-icon{-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-role-properties verdocs-select-input label{display:block}verdocs-template-role-properties verdocs-text-input{margin:0}verdocs-template-role-properties verdocs-text-input label{display:block}verdocs-template-role-properties verdocs-text-input .input-label{-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-role-properties verdocs-text-input input{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-role-properties verdocs-text-input verdocs-text-input{margin:0}verdocs-template-role-properties .checkbox-wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-role-properties .delete-button{height:34px;display:-ms-flexbox;display:flex;padding:0 6px;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-role-properties .delete-button svg{width:24px;height:24px}verdocs-template-role-properties .delete-button:active{background:#f3f3f3}";

const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#a50021"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>`;
const VerdocsTemplateRoleProperties = /*@__PURE__*/ proxyCustomElement(class VerdocsTemplateRoleProperties extends H {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.close = createEvent(this, "close");
        this.delete = createEvent(this, "delete");
        this.sdkError = createEvent(this, "sdkError");
        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 = '';
        /**
         * The role name to edit.
         */
        this.roleName = '';
        this.dirty = false;
        this.saving = false;
        this.name = '';
        this.type = 'signer';
        this.first_name = '';
        this.last_name = '';
        this.email = '';
        this.phone = '';
        this.delegator = false;
        this.loading = true;
        this.template = null;
    }
    async componentWillLoad() {
        var _a, _b, _c;
        try {
            this.endpoint.loadSession();
            if (!this.templateId) {
                console.log(`[ROLES] Missing required template ID ${this.templateId}`);
                return;
            }
            if (!this.endpoint.session) {
                console.log('[ROLES] Unable to start builder session, must be authenticated');
                return;
            }
            this.listenToTemplate();
        }
        catch (e) {
            console.log('[ROLES 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));
        }
    }
    disconnectedCallback() {
        this.unlistenToTemplate();
    }
    async listenToTemplate() {
        console.log('[ROLES] Loading tempate', this.templateId);
        this.unlistenToTemplate();
        Store.subscribe('templates', this.templateId, () => getTemplate(this.endpoint, this.templateId), false, (template) => {
            var _a;
            console.log('[BUILD] Template Updated', template);
            this.template = template;
            this.loading = false;
            const editingRole = (_a = this.template) === null || _a === void 0 ? void 0 : _a.roles.find(role => role.name === this.roleName);
            if (editingRole) {
                this.name = editingRole.name;
                this.type = editingRole.type;
                this.first_name = editingRole.first_name;
                this.last_name = editingRole.last_name;
                this.email = editingRole.email;
                this.phone = editingRole.phone;
                this.delegator = editingRole.delegator;
                console.log('[ROLES] Editing role', editingRole);
            }
        });
    }
    unlistenToTemplate() {
        if (this.templateListenerId) {
            Store.store.delListener(this.templateListenerId);
            this.templateListenerId = null;
        }
    }
    handleCancel(e) {
        var _a, _b;
        e.stopPropagation();
        const editingRole = (_a = this.template) === null || _a === void 0 ? void 0 : _a.roles.find(role => role.name === this.roleName);
        if (editingRole) {
            this.name = editingRole.name;
            this.type = editingRole.type;
            this.first_name = editingRole.first_name;
            this.last_name = editingRole.last_name;
            this.email = editingRole.email;
            this.phone = editingRole.phone;
            this.delegator = editingRole.delegator;
        }
        this.dirty = false;
        (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
    }
    async handleSave(e) {
        e.stopPropagation();
        this.saving = true;
        updateTemplateRole(this.endpoint, this.templateId, this.roleName, {
            name: this.name,
            type: this.type,
            first_name: this.first_name,
            last_name: this.last_name,
            email: this.email,
            phone: this.phone,
            delegator: this.delegator,
        })
            .then(async (r) => {
            var _a;
            console.log('[ROLES] Update result', r);
            this.saving = false;
            this.dirty = false;
            const newTemplate = JSON.parse(JSON.stringify(this.template));
            const roleIndex = newTemplate.roles.findIndex(role => role.name === this.roleName);
            if (roleIndex > -1) {
                newTemplate.roles[roleIndex] = r;
            }
            Store.updateTemplate(this.templateId, newTemplate);
            (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
        })
            .catch(e => {
            console.log('[ROLES Update error', e);
            this.saving = false;
        });
    }
    async handleDelete(e) {
        e.stopPropagation();
        if (window.confirm('Are you sure you wish to remove this role? All associated fields will be removed as well. This action cannot be undone.')) {
            deleteTemplateRole(this.endpoint, this.templateId, this.roleName)
                .then(() => {
                var _a, _b;
                const newTemplate = JSON.parse(JSON.stringify(this.template));
                newTemplate.roles = newTemplate.roles.filter(role => role.name !== this.roleName);
                Store.getTemplate(this.endpoint, this.templateId, true);
                // Store.updateTemplate(this.templateId, newTemplate);
                (_a = this.delete) === null || _a === void 0 ? void 0 : _a.emit({ templateId: this.templateId, roleName: this.roleName });
                (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
            })
                .catch(e => {
                console.log('[ROLES Deletion error', e);
            });
        }
    }
    render() {
        var _a;
        const hasFields = (((_a = this.template) === null || _a === void 0 ? void 0 : _a.fields) || []).some(field => field.role_name === this.roleName);
        // Either all three should be empty, or all three need to be filled
        const isValid = (!this.email && !this.first_name && !this.last_name) || (isValidEmail(this.email) && !!this.first_name && !!this.last_name);
        return (h(Host, { key: '14d2d9bb4253201a9cb659c6637960194dc7d134' }, h("form", { key: '09d0a10f48c8f4ca3f6b679d09c3c71ea0c0cdb9', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: 'b65e74e82bb7689d706ba0e56521d04fe01ae057' }, h("verdocs-text-input", { key: 'c7e3da4d57b096f71a4c5e49948ee0a4e0594e0c', id: "verdocs-role-name", label: "Role Name (Must be unique)", value: this.name, autocomplete: "off", disabled: hasFields, placeholder: "Role Name...", onInput: (e) => {
                this.name = e.target.value;
                this.dirty = true;
            } }), hasFields && h("div", { key: '9a80102f0a04118069c2865c9295e5da3914b381', class: "instructions" }, "This role has fields assigned and can no longer be renamed.")), h("div", { key: '93ca24cfbc2b1f8e729c30a0726b14091695ba92' }, h("div", { key: '0b5eeeab4aad7e1659581eb8c17e14012d79b5e6', class: "input-label" }, "Type:"), h("verdocs-select-input", { key: '883b1456bad033a17023559a210f61efc17cb1ab', value: this.type, options: [
                { label: 'Signer', value: 'signer' },
                { label: 'CC', value: 'cc' },
                { label: 'Approver', value: 'approver' },
            ], onInput: (e) => {
                this.type = e.target.value;
                this.dirty = true;
            } })), h("div", { key: 'fec29a6add9ab2a60e4deb29ee77c851973e0517' }, h("div", { key: 'a18a7d1edfb673e382d76d04d833f3daf28ca26f', class: "input-label" }, "Default Contact Info:"), h("div", { key: '1206cab495d52ab12428dbc346126df3a2aa9c1a', class: "first-last" }, h("verdocs-text-input", { key: 'aa4433e84dee223043c49235c8e9feb7569707e9', id: "verdocs-recipient-first", value: this.first_name, autocomplete: "off", placeholder: "First...", onInput: (e) => {
                this.first_name = e.target.value;
                this.dirty = true;
            } }), h("verdocs-text-input", { key: 'b8c1069666a4674faff0c1b72bc988cf3ed3ca9b', id: "verdocs-recipient-first", value: this.last_name, autocomplete: "off", placeholder: "Last...", onInput: (e) => {
                this.last_name = e.target.value;
                this.dirty = true;
            } }))), h("div", { key: '5ea9ada6f0dac2a52b78946275603e2c99887666' }, h("verdocs-text-input", { key: '767135ec9d13ae00e6c1d259a6d53fbf85caeedd', id: "verdocs-recipient-email", value: this.email, autocomplete: "off", placeholder: "Email Address...", onInput: (e) => {
                this.email = e.target.value;
                this.dirty = true;
            } }), h("div", { key: '0c4ffc5553a054ae331bcbf48a7b702d0fd5a81e', style: { height: '15px' } }), h("div", { key: '17815735c29adc551f65a7f29d1a791c9260edfc' }, h("verdocs-text-input", { key: '0d41ae8e9cda72d881791df7d63f89f25d08da5e', id: "verdocs-recipient-phone", value: this.phone, autocomplete: "off",
            // helpText="The recipient's phone number, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template."
            placeholder: "Phone Number...", onInput: (e) => {
                this.phone = e.target.value;
                this.dirty = true;
            } }))), h("div", { key: 'be29c3c856e62cab357391146485230461e6c5c9', class: "buttons" }, h("button", { key: 'a714765b9f8f524a0c6573653b6ba6a59661b4d2', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { key: 'aae4bf7f4fa5fc685ace057a2312461a7cf993f3', style: { flex: '1' } }), h("verdocs-button", { key: '027aa0723fc32b4713e7a9cb33e6a1b7d4b5ab18', size: "small", label: "Save", disabled: !this.dirty || !isValid, onClick: e => this.handleSave(e) })))));
    }
    static get style() { return verdocsTemplateRolePropertiesCss; }
}, [256, "verdocs-template-role-properties", {
        "endpoint": [16],
        "templateId": [1, "template-id"],
        "roleName": [1, "role-name"],
        "dirty": [32],
        "saving": [32],
        "name": [32],
        "type": [32],
        "first_name": [32],
        "last_name": [32],
        "email": [32],
        "phone": [32],
        "delegator": [32],
        "loading": [32],
        "template": [32]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["verdocs-template-role-properties", "verdocs-button", "verdocs-help-icon", "verdocs-select-input", "verdocs-text-input"];
    components.forEach(tagName => { switch (tagName) {
        case "verdocs-template-role-properties":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, VerdocsTemplateRoleProperties);
            }
            break;
        case "verdocs-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "verdocs-help-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "verdocs-select-input":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "verdocs-text-input":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { VerdocsTemplateRoleProperties as V, defineCustomElement as d };
//# sourceMappingURL=p-2-71mUOp.js.map

//# sourceMappingURL=p-2-71mUOp.js.map