// Bootstrap modal with the training edit form

import { alert, api, h } from './common.js';
import { editForm } from './edit-form.js';

/** "Изменить" button: opens the modal, the page reloads after a save to show fresh data */
export function editButton(trainingId) {
    const button = h('button', { type: 'button', class: 'btn btn-sm btn-outline-secondary' }, 'Изменить');
    button.addEventListener('click', () => openEditDialog(trainingId, () => location.reload()));
    return button;
}

/** Opens the form for the training; onChange() is called after it was saved or deleted. */
export async function openEditDialog(trainingId, onChange) {
    const body = h('div', { class: 'modal-body' }, h('div', { class: 'text-muted' }, 'Загрузка…'));
    const element = h('div', { class: 'modal fade', tabindex: '-1', 'aria-labelledby': 'edit-modal-title', 'aria-hidden': 'true' },
        h('div', { class: 'modal-dialog modal-lg modal-dialog-scrollable' },
            h('div', { class: 'modal-content' },
                h('div', { class: 'modal-header' },
                    h('h2', { class: 'modal-title h5', id: 'edit-modal-title' }, 'Редактирование тренировки'),
                    h('button', { type: 'button', class: 'btn-close', 'data-bs-dismiss': 'modal', 'aria-label': 'Закрыть' })),
                body)));

    const modal = new bootstrap.Modal(element);
    element.addEventListener('hidden.bs.modal', () => {
        modal.dispose();
        element.remove();
    });
    document.body.append(element);
    modal.show();

    try {
        const [training, exerciseNames] = await Promise.all([
            api(`/trainings/${trainingId}/`),
            api('/exercises/'),
        ]);
        body.replaceChildren(editForm(training, exerciseNames, {
            onDone: () => { modal.hide(); onChange(); },
            onCancel: () => modal.hide(),
        }));
    } catch (error) {
        body.replaceChildren(alert('danger', error.status === 404
            ? 'Тренировка не найдена.'
            : `Не удалось загрузить тренировку: ${error.message}`));
    }
}