import {closeModal, showModal} from './modal.js';
import {showToast} from './toast.js';

const reportModal = document.getElementById('report-modal');
const reportForm = document.getElementById('report-form');


export function showReportModal(dealId, dealTitle) {
    // Clear the fields
    reportForm.reset();
    const oldErrors = reportForm.querySelectorAll('.text-red-500');
    oldErrors.forEach(error => error.remove());

    reportModal.dataset.dealId = dealId;
    const reportModalTitle = document.getElementById('report-modal-title');
    const reportModalId = document.getElementById('report-modal-id');
    reportModalTitle.innerText = dealTitle;
    reportModalId.innerText = dealId;
    showModal('report-modal');
}

if (reportForm) {

    reportForm.addEventListener('submit', async function (form) {
        form.preventDefault();
        const formData = new FormData(this);
        const dealId = reportModal.dataset.dealId
        try {

            let response = await axios.post(
                `api/report/${dealId}`,
                formData
            );

            showToast(response.data.message);
            closeModal('report-modal')

        } catch (error) {



            // Iterate over the all error messages spans and show validation errors
            if (error.response.status === 422) {

                let errors = error.response.data.errors;

                Object.keys(errors).forEach(error => {
                    let errorField = reportForm.querySelector(`[name="${error}"]`)
                    const errorSpan = document.createElement('span');
                    errorSpan.textContent = errors[error][0];
                    errorSpan.classList.add('text-red-500');
                    errorSpan.classList.add('text-sm');
                    errorField.insertAdjacentElement('afterend', errorSpan);
                })
            }
        }
    });
}