const container = () => document.getElementById('modal-container');

export function showModal(html) {
    container().innerHTML = `<div class="modal-overlay" onclick="ModalBase.closeOnBg(event)">${html}</div>`;
}

export function closeModal() {
    container().innerHTML = '';
}

export function closeOnBg(e) {
    if (e.target.classList.contains('modal-overlay')) closeModal();
}

export function stepperHtml(id, value, step, placeholder, inputmode = 'decimal') {
    const v = value !== '' && value != null ? value : '';
    return `<div class="stepper-field">
        <button type="button" class="stepper-btn" onclick="ModalBase.stepValue('${id}', -${step})">−</button>
        <input type="number" id="${id}" step="${step}" value="${v}" placeholder="${placeholder}" inputmode="${inputmode}">
        <button type="button" class="stepper-btn" onclick="ModalBase.stepValue('${id}', ${step})">+</button>
    </div>`;
}

export function stepValue(id, delta) {
    const input = document.getElementById(id);
    if (!input) return;
    const current = parseFloat(input.value) || 0;
    const step = parseFloat(input.step) || 1;
    const newVal = Math.max(0, current + delta);
    input.value = parseFloat((Math.round(newVal / step) * step).toFixed(4));
}

window.ModalBase = {
    showModal,
    closeModal,
    close: closeModal,
    closeOnBg,
    stepValue
};