document.addEventListener('DOMContentLoaded', () => {
    const textsList = document.getElementById('texts-list');
    const createPlanModal = document.getElementById('create-plan-modal');

    async function loadTexts() {
        const response = await fetch('/api/texts');
        const texts = await response.json();
        textsList.innerHTML = texts
            .map(text =>
                '<li>' + text.name +
                ' <button class="create-plan" data-text-id="' +
                text.id + '">Create plan</button></li>'
            )
            .join('');
    }

    const cancelPlanButton = createPlanModal.querySelector(
        'button.cancel-plan'
    );
    const savePlanButton = createPlanModal.querySelector(
        'button.save-plan'
    );
    const planNameInput = createPlanModal.querySelector('input.plan-name');
    const planDateStartInput = createPlanModal.querySelector(
        'input.plan-date-start'
    );
    const planDateEndInput = createPlanModal.querySelector(
        'input.plan-date-end'
    );

    function openCreatePlanModal(textId) {
        createPlanModal.dataset.textId = textId;
        createPlanModal.hidden = false;
    }

    function closeCreatePlanModal() {
        createPlanModal.hidden = true;
        planNameInput.value = '';
        planDateStartInput.value = '';
        planDateEndInput.value = '';
    }

    textsList.addEventListener('click', (clickEvent) => {
        const createPlanButton = clickEvent.target.closest(
            'button.create-plan'
        );
        if (createPlanButton === null) {
            return;
        }
        openCreatePlanModal(createPlanButton.dataset.textId);
    });

    cancelPlanButton.addEventListener('click', () => {
        closeCreatePlanModal();
    });

    savePlanButton.addEventListener('click', async () => {
        const planName = planNameInput.value;
        const dateStart = planDateStartInput.value;
        const dateEnd = planDateEndInput.value;
        const textId = Number(createPlanModal.dataset.textId);

        if (planName === '' || dateStart === '' || dateEnd === '') {
            return;
        }

        const response = await fetch('/api/plans', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                userId: 0,
                textId: textId,
                name: planName,
                dateStart: dateStart,
                dateEnd: dateEnd,
            }),
        });

        if (response.ok) {
            closeCreatePlanModal();
        }
    });

    loadTexts();
});