"use strict";
/**
 * Send ajax action to server
 * @param {string} action 
 * @param {Object} args 
 * @param {Function} onLoad 
 * @param {Function} onSuccess 
 * @param {Function} onError 
 */
function sendAjax(action,
    args = [],
    onLoad = () => { },
    onSuccess = (data) => { },
    onError = (error) => { }) {

    onLoad();

    fetch('/ajax', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            'action': action,
            'args': args
        })
    })
        .then(response => response.json().then(data => ({ data, response })))
        .then(({ data, response }) => {
            if (!response.ok) {
                throw new Error(data.error || `HTTP error! Status: ${response.status}`);
            }

            onSuccess(data);
        })
        .catch(error => {
            onError(error);
        });
}
function showToastify(message, type = "info") {
    Toastify({
        text: message,
        gravity: "bottom",
        position: "left",
        className: type,
        duration: 3000
    })
        .showToast();
}

document.addEventListener('DOMContentLoaded', function () {
    const toggle = document.getElementById('menu-toggle');
    const nav = document.querySelector('.nav');
    const icon = document.getElementById('menu-icon');

    toggle.addEventListener('click', function () {
        nav.classList.toggle('nav-open');
        if (nav.classList.contains('nav-open')) {
            icon.classList.remove('fa-bars');
            icon.classList.add('fa-xmark');
        } else {
            icon.classList.remove('fa-xmark');
            icon.classList.add('fa-bars');
        }
    });
});

const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');

let searchTimeout;

searchInput.addEventListener('input', function () {
    clearTimeout(searchTimeout);

    searchTimeout = setTimeout(async () => {
        let searchValue = this.value.trim();

        if (searchValue.length < 3) {
            searchResults.innerHTML = '';
            searchResults.classList.add('hidden');
            return;
        }

        const formData = new FormData();
        formData.append('action', 'search');
        formData.append('query', searchValue);

        const response = await fetch('/ajax', {
            method: 'POST',
            body: formData
        });

        const json = await response.json();

        if (!response.ok) {
            const message = json.error || 'Something went wrong.';
            showToastify(message, 'error');
            return;
        }

        const results = json.result;

        searchResults.innerHTML = '';

        if (results.length > 0) {
            results.forEach(result => {
                searchResults.innerHTML += `
        <div class="search-result-item hover-anim">
            <a href="#" class="search-result-link">
            ${result.field_title}
            </a>
        </div>
        `;
            });
            searchResults.classList.remove('hidden');
        } else {
            searchResults.innerHTML = `<div class="search-result-item">No recipes found</div>`;
            searchResults.classList.remove('hidden');
        }
    }, 300);
});