'use strict';

var index = require('./index-CDEIqi_n.js');
var jsSdk = require('@verdocs/js-sdk');
var errors = require('./errors-D1XRvnet.js');

const verdocsTemplateCreateCss = "@-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-create{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-create form{background-color:#ffffff;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-create form .upload-box{-webkit-box-sizing:border-box;box-sizing:border-box;width:320px;text-align:center;padding:44px 18px 66px;border:2px dashed #979797;color:rgba(0, 0, 0, 0.54)}verdocs-template-create form .upload-box.drag-over{border:2px solid #4c56cb}verdocs-template-create form .upload-box svg{width:64px;fill:#5c6575}verdocs-template-create p{color:#33364b;margin-top:20px;font-size:18px;font-weight:500;overflow-wrap:anywhere}verdocs-template-create p.subscript{color:#5c6575;font-size:14px;margin:20px}verdocs-template-create .loader-wrapper{background-color:#ffffff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;width:320px;height:320px;text-align:center;border:2px dashed #979797;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .progress-wrapper{padding:20px}verdocs-template-create .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-template-create ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-create ::-moz-placeholder{color:#aaaaaa}verdocs-template-create :-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::placeholder{color:#aaaaaa}verdocs-template-create .error{margin:20px 0;color:#cc0000}";

const FileIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"></path></svg>';
const VerdocsTemplateCreate = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.exit = index.createEvent(this, "exit");
        this.next = index.createEvent(this, "next");
        this.sdkError = index.createEvent(this, "sdkError");
        this.templateCreated = index.createEvent(this, "templateCreated");
        /**
         * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
         */
        this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
        this.maxSize = 20.5 * 1024 * 1024;
        this.creating = false;
        this.progressLabel = 'Uploading...';
        this.progressPercent = 0;
        this.errorMessage = '';
    }
    componentWillLoad() {
        this.endpoint.setTimeout(30000);
        this.endpoint.loadSession();
    }
    handleFileChanged(e) {
        var _a;
        this.errorMessage = '';
        this.file = ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null;
        console.log('[CREATE] Selected file', this.file);
        const totalSize = this.file.size;
        if (totalSize > this.maxSize) {
            this.errorMessage = 'Total file size must not exceed 20MB.';
        }
    }
    handleUpload(e) {
        e.stopPropagation();
        const fileElem = document.getElementById('verdocs-template-create-file');
        fileElem.click();
    }
    handleCancel(e) {
        e.stopPropagation();
        this.exit.emit();
    }
    async handleSubmit(e) {
        var _a, _b, _c, _d, _e;
        e.stopPropagation();
        // Should be true if we're here because onClick is only enabled then. We're just guarding this for Typescript.
        if (!this.file) {
            return;
        }
        this.creating = true;
        this.progressLabel = 'Uploading...';
        try {
            const template = await jsSdk.createTemplate(this.endpoint, {
                name: this.file.name,
                // TODO: Make optional in the SDK
                initial_reminder: 0,
                followup_reminders: 0,
                documents: [this.file],
            }, percent => {
                if (percent >= 99) {
                    this.progressLabel = 'Processing...';
                    this.progressPercent = 100;
                }
                else {
                    this.progressPercent = percent;
                }
            });
            console.log('[CREATE] Created template', template);
            (_a = this.templateCreated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template, templateId: template.id });
            (_b = this.next) === null || _b === void 0 ? void 0 : _b.emit(template);
            this.creating = false;
            this.progressLabel = '';
            this.progressPercent = 0;
        }
        catch (e) {
            console.log('[CREATE] Error creating template', e);
            (_c = this.sdkError) === null || _c === void 0 ? void 0 : _c.emit(new errors.SDKError(e.message, (_d = e.response) === null || _d === void 0 ? void 0 : _d.status, (_e = e.response) === null || _e === void 0 ? void 0 : _e.data));
            this.creating = false;
        }
    }
    render() {
        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("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("input", { type: "file", id: "verdocs-template-create-file", multiple: true, accept: ".pdf,application/pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), this.creating ? (index.h("div", { class: "loader-wrapper" }, index.h("verdocs-loader", null), this.progressLabel && (index.h("div", { class: "progress-wrapper" }, index.h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (index.h("div", { class: "upload-box", onDrop: (e) => {
                e.preventDefault();
                e.target.classList.remove('drag-over');
                this.file = e.dataTransfer.files[0];
                if (this.file.size > this.maxSize) {
                    this.errorMessage = 'Total file size must not exceed 20MB.';
                }
            }, onDragOver: (e) => {
                e.preventDefault();
                e.dataTransfer.dropEffect = 'copy';
            }, onDragEnter: (e) => e.target.classList.add('drag-over'), onDragLeave: (e) => e.target.classList.remove('drag-over') }, index.h("span", { innerHTML: FileIcon, style: { display: 'flex', justifyContent: 'center' } }), index.h("p", null, this.file ? this.file.name : 'Drag and drop your files here'), index.h("p", { class: "subscript" }, "Supported files: PDF, Word"), index.h("verdocs-button", { label: this.file ? 'Select a different file' : 'Select a file from your computer', size: "small", onClick: e => this.handleUpload(e) }))), !!this.errorMessage && index.h("div", { class: "error" }, this.errorMessage), index.h("div", { class: "buttons" }, index.h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e), disabled: this.creating }), index.h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleSubmit(e), disabled: !this.file || this.creating || !!this.errorMessage })))));
    }
};
VerdocsTemplateCreate.style = verdocsTemplateCreateCss;

exports.verdocs_template_create = VerdocsTemplateCreate;
//# sourceMappingURL=verdocs-template-create.entry.cjs.js.map

//# sourceMappingURL=verdocs-template-create.cjs.entry.js.map