import { d as dateFnsExports } from './p-6fSdgmoO.js';
import { getEnvelopesZip, downloadBlob, rescale } from '@verdocs/js-sdk';
import { a as FORMAT_DATE } from './p-DMMF9yT2.js';

const defaultWidth = (type) => {
    // checkbox was a legacy field type
    switch (type) {
        case 'textarea':
            return 150;
        case 'textbox':
            return 150;
        case 'timestamp':
            return 105;
        case 'date':
            return 75;
        case 'dropdown':
            return 85;
        case 'attachment':
        case 'payment':
            return 24;
        case 'radio':
        case 'checkbox':
            return 14;
        case 'signature':
        case 'initial':
            return 71;
    }
    return 150;
};
const defaultHeight = (type) => {
    switch (type) {
        case 'textarea':
            return 41;
        case 'textbox':
            return 15;
        case 'timestamp':
            return 15;
        case 'date':
            return 15;
        case 'dropdown':
            return 20;
        case 'attachment':
        case 'payment':
            return 24;
        case 'radio':
        case 'checkbox':
            return 14;
        case 'signature':
        case 'initial':
            return 36;
    }
    return 50;
};
const setControlStyles = (el, field, xScale, yScale) => {
    let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = field;
    el.style.width = `${width}px`;
    el.style.height = `${height}px`;
    el.style.position = 'absolute';
    el.style.left = `${rescale(xScale, x)}px`;
    el.style.bottom = `${rescale(yScale, y)}px`;
    el.style.transform = `scale(${xScale}, ${yScale})`;
};
const getControlStyles = (field, xScale, yScale) => {
    let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = field;
    return {
        zIndex: '100',
        width: `${width}px`,
        height: `${height}px`,
        position: 'absolute',
        left: `${rescale(xScale, x)}px`,
        bottom: `${rescale(yScale, y)}px`,
        transform: `scale(${xScale}, ${yScale})`,
    };
};
const getFieldId = (field) => {
    return `verdocs-doc-fld-${field.name}`;
};
const updateDocumentFieldValue = (field) => {
    const id = getFieldId(field);
    const existingField = document.getElementById(id);
    if (existingField) {
        existingField.field = field;
        existingField.roleindex = field;
        existingField.setAttribute('id', id); // We need this to trigger a re-render
        existingField.setAttribute('disabled', true); // We need this to trigger a re-render
        existingField.setAttribute('disabled', false); // We need this to trigger a re-render
    }
};
const renderDocumentField = (source, field, docPage, fieldOptions, tabIndex = 1) => {
    var _a, _b;
    const { disabled = false, editable = false, draggable = false, done = false } = fieldOptions;
    const controlsDiv = document.getElementById(docPage.containerId + '-controls');
    if (!controlsDiv) {
        console.log('[renderDocumentField] No controls DIV found', docPage.containerId + '-controls', docPage);
        return;
    }
    // console.log('[renderDocumentField] Rendering field', field);
    switch (field.type) {
        case 'radio':
        case 'checkbox':
        case 'attachment':
        case 'date':
        case 'dropdown':
        case 'initial':
        case 'payment':
        case 'signature':
        case 'timestamp':
        case 'textarea':
        case 'textbox': {
            const id = getFieldId(field);
            const existingField = document.getElementById(id);
            if (existingField) {
                existingField.field = field;
                existingField.done = done;
                setControlStyles(existingField, field, docPage.xScale, docPage.yScale);
                return existingField;
            }
            let { type } = field;
            if (type === 'textbox') {
                if (((_a = field['setting']) === null || _a === void 0 ? void 0 : _a.leading) > 0 || ((_b = field['settings']) === null || _b === void 0 ? void 0 : _b.leading) > 0) {
                    type = 'textarea';
                }
            }
            const el = document.createElement(`verdocs-field-${type}`);
            el.field = field;
            el.setAttribute('id', id);
            el.setAttribute('fieldname', field.name);
            el.setAttribute('source', source);
            el.setAttribute('sourceid', 'template_id' in field ? field.template_id : field.envelope_id);
            if (disabled) {
                el.setAttribute('tabindex', -1);
                el.setAttribute('disabled', true);
            }
            else {
                el.setAttribute('tabindex', tabIndex);
            }
            el.setAttribute('editable', editable);
            el.setAttribute('draggable', draggable);
            el.setAttribute('done', done);
            setControlStyles(el, field, docPage.xScale, docPage.yScale);
            controlsDiv.appendChild(el);
            return el;
        }
        default:
            console.log('[PREVIEW] Skipping unsupported field type', field);
            return null;
    }
};
/**
 * Helper function to safely set/update components in a CSS transform attribute. Transform is normally set as a string of
 * `operation1(param) operation2(param) ...` components, which makes updating them a bit of a pain. This will remove the
 * specified component if it's already set and replace it with the new value, without touching the other components that
 * may already be set. Note that this operation moves the component to the end of the transform chain so it's not meant
 * to be used for order-sensitive components e.g. translate-then-rotate.
 */
const updateCssTransform = (el, key, value) => {
    const currentTransform = el.style.transform || '';
    const newValue = `${key}(${value})`;
    if (currentTransform.includes(key)) {
        el.style.transform = currentTransform.replace(new RegExp(`${key}\\(.+?\\)`), newValue);
    }
    else {
        el.style.transform = currentTransform + ' ' + newValue;
    }
};
const removeCssTransform = (el) => {
    // const currentTransform = el.style.transform || '';
    el.style.transform = el.style.transform.split(')')[0] + ')';
    // TODO: This is not working
    // el.style.transform = currentTransform.replace(new RegExp(`\(${key}\\(.+?\\)\)`), '');
};
const saveEnvelopesAsZip = async (endpoint, envelopes) => {
    const formattedDate = dateFnsExports.format(envelopes.length === 1 ? new Date(envelopes[0].updated_at) : new Date(), FORMAT_DATE);
    const zipFileName = envelopes.length === 1 ? `${envelopes[0].name} - ${formattedDate}.zip` : `Verdocs-Envelopes-${formattedDate}`;
    console.log('Downloading envelopes as ZIP', envelopes, zipFileName);
    const result = await getEnvelopesZip(endpoint, envelopes.map(e => e.id));
    downloadBlob(result.data, zipFileName);
};
/**
 * Throttle a given function by a delay value. Useful for things like resizeObserver.
 */
const throttle = (f, delay) => {
    let timer = 0;
    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => f.apply(this, args), delay);
    };
};
/**
 * Compute the rendered width of a given text string, using a given font.
 */
const renderedTextWidth = (text, font = '16px Arial') => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    ctx.font = font;
    return ctx.measureText(text).width;
};
// "(212) 555-1212" => +12125551212
// "+46766861004" => "+46766861004"
// "212-555-1212" => +12125551212
// "212.555.1212" => +12125551212
// "212 555 1212" => +12125551212
// @see https://46elks.com/kb/e164
const convertToE164 = (input) => {
    let temp = (input || '').trim();
    // If we are already prefixed, assume the user did it deliberately and attempt to use what they entered. We also short-circuit blanks.
    if (!temp || temp.startsWith('+')) {
        return temp;
    }
    // Remove any spaces, parenthesis or other punctuation.
    temp = temp.replace(/[^0-9]/g, '');
    // If the number begins with a zero, remove the leading zero. Do not combine this with the previous step because it needs to be removed
    // whether it's the actual first character e.g. `0(5)` or just the first digit e.g. `(05`.
    temp = temp.replace(/^0/g, '');
    // Prepend the country code and +. We're assuming US in this case given the target demographic. Users in other countries would/should be
    // already entering a prefix so they'd shortcut out of this routine via the + prefix check.
    return `+1${temp}`;
};
const renderDocumentFlag = (docPage, y, // Bottom position from field
height, // Field height
options) => {
    const controlsDiv = document.getElementById(docPage.containerId + '-controls');
    if (!controlsDiv) {
        return;
    }
    const el = document.createElement('verdocs-flag');
    el.variant = options.variant;
    el.label = options.label;
    el.showSkip = options.showSkip;
    if (options.id) {
        el.setAttribute('id', options.id);
    }
    el.classList.add('verdocs-flag-instance'); // Marker class for easy removal
    if (options.onSkip) {
        el.addEventListener('skip', options.onSkip);
    }
    if (options.onClick) {
        el.addEventListener('flagClick', options.onClick);
    }
    // Position the flag to stick out of the right edge of the page
    el.style.position = 'absolute';
    // The flag has a left-pointing arrow that is 14px wide (15% of 97px ~= 14.5px).
    // We want the "body" of the rectangle (starting after the arrow) to align with the
    // right edge of the page.
    el.style.left = 'calc(100% - 14px)';
    /*
     * Positioning Logic:
     * Field Y is distance from bottom.
     * Fields have `transform-origin: bottom left`.
     * Visual Bottom = y * scale.
     * Visual Top = (y * scale) + (height * scale).
     * Visual Center = (y * scale) + (height * scale) / 2.
     */
    // const flagHeight = 24; // Matches CSS
    const scaledY = rescale(docPage.yScale, y);
    const scaledHeight = rescale(docPage.yScale, height);
    // Align Flag Bottom with Field Top
    const bottom = scaledY + scaledHeight;
    el.style.bottom = `${bottom}px`;
    controlsDiv.appendChild(el);
    return el;
};
/**
 * Helper to generate a human-readable label for a field.
 */
const getFieldLabel = (field) => {
    if (!field)
        return '';
    const typeMap = {
        signature: 'Signature',
        initial: 'Initials',
        date: 'Date',
        textbox: 'Text Field',
        checkbox: 'Checkbox',
        radio: 'Radio Button',
        dropdown: 'Dropdown',
        attachment: 'Attachment',
        payment: 'Payment',
    };
    const typeName = typeMap[field.type] || 'Field';
    if (field.required) {
        return `Required ${typeName}*`;
    }
    return `Optional ${typeName}`;
};

export { renderDocumentField as a, renderedTextWidth as b, convertToE164 as c, defaultHeight as d, getFieldLabel as e, getControlStyles as f, getFieldId as g, updateCssTransform as h, removeCssTransform as i, setControlStyles as j, defaultWidth as k, renderDocumentFlag as r, saveEnvelopesAsZip as s, throttle as t, updateDocumentFieldValue as u };
//# sourceMappingURL=p-Dk8BEvRP.js.map

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