import {showToast} from "@/toast.js";
import {closeModal, showModal} from "@/modal.js";
import {favorite, like, redirect} from "@/interaction.js";
import {showReportModal} from "@/report-deal.js";

async function showDealModal(dealId, dealTitle) {
    if (dealId === null || dealId === "") {
        showToast('Something went wrong!');
        return;
    }

    // Open the deal modal and show a loading state
    showModal('deal-modal')

    try {
        const response = await axios.get('/api/deals/' + dealId);
        setDealDetails(response.data);

        const dealModal = document.getElementById('deal-modal');

        const likeBtn = dealModal.querySelector('.likeBtn');
        likeBtn.addEventListener('click', () => {
            like(likeBtn, dealId);
        })

        const favoriteBtn = dealModal.querySelector('.favoriteBtn');
        favoriteBtn.addEventListener('click', () => {
            favorite(favoriteBtn, dealId);
        })


        const reportBtn = dealModal.querySelector('.reportBtn');
        reportBtn.addEventListener('click', async () => {
            showReportModal(dealId, dealTitle)
        })

    } catch (e) {
        console.error(e)
        closeModal('deal-modal')
        showToast('Something went wrong!');
    }
}

function setDealDetails(dealDetails) {
    if (dealDetails === null) {
        throw new Error('DealDetails must be not null');
    }

    // // Can throw error, handle it else
    // dealDetails = JSON.parse(dealDetails);
    console.log(dealDetails);
    const deal = dealDetails.data
    const {id, title, description, link, image, category, broker, total_redirection, total_likes} = deal;
    const dealModal = document.getElementById('deal-modal');

    dealModal.querySelector('.deal-image').src = image;
    dealModal.querySelector('.deal-title').innerText = title;
    dealModal.querySelector('.deal-description').innerText = description;
    dealModal.querySelector('.deal-category').innerText = category.name;
    dealModal.querySelector('.broker-name').innerText = broker.name;
    dealModal.querySelector('.broker-email').innerText = broker.email;
    dealModal.querySelector('.broker-phone').innerText = broker.role.phone;
    dealModal.querySelector('.likeCount').querySelector('p').innerText = total_likes ?? '0';
    dealModal.querySelector('.clickCount').querySelector('p').innerText = total_redirection ?? '0';

    const dealLink = dealModal.querySelector('.deal-link');
    if (link !== null && link !== "") {
        dealLink.classList.remove('hidden');
        dealLink.classList.add('flex');
        dealLink.addEventListener('click', () => {
            redirect(link);
        })
    } else {
        dealLink.classList.remove('flex');
        dealLink.classList.add('hidden');
    }
}

window.addEventListener('DOMContentLoaded', () => {
    const dealCards = document.querySelectorAll('.deal-card');
    if (dealCards) {
        dealCards.forEach(dealCard => {
            let dealId = dealCard.dataset.dealId;
            let dealTitle = dealCard.querySelector('.action-toolbar').dataset.dealTitle;

            dealCard.addEventListener('click', async (e) => {
                if (e.target.closest('button')) {
                    return;
                }
                await showDealModal(dealId, dealTitle);
            });
        })
    }
});