const categoriasEl    = document.querySelector("#categorias");
const detCategoriasEl = document.querySelector("#detCategorias");
const tituloDetalleEl = document.querySelector("#tituloDetalle");
const verDetallleEl   = document.querySelector("#verDetallle");


const APICategorias     ="https://www.themealdb.com/api/json/v1/1/categories.php";
const APIDetCategorias  ="https://www.themealdb.com/api/json/v1/1/categories.php";

addEventListener("DOMContentLoaded",()=>{
    cargarCategorias();
    cargarDetCategorias("Beef");
})

const cargarCategorias = async()=>{
    try{
        const resp = await fetch(APICategorias)
        if(resp.status===200){
            const datos = await resp.json();
            //console.log(datos.categories)
            renderCategorias(datos.categories);
        }else{
            console.log("error del api")
        }

    }catch(error){
        console.log(error);
    }
}
function renderCategorias(categorias){
    let valor="";
    categorias.forEach(element =>{
        valor+=
        `
        <div class="text-center p-3 catItem">
          
                <img src="${element.strCategoryThumb}" class="figure-img img-fluid rounded-5" alt="..." name="${element.strCategory}">
                <figcaption class="figure-caption">${element.strCategory}</figcaption>
            
        </div>
        `
   })
   categoriasEl.innerHTML=valor
}
categoriasEl.addEventListener("click",(e)=>{
    cargarDetCategorias(e.target.name);
})
const cargarDetCategorias = async(nombre)=>{
    tituloDetalleEl.innerHTML=nombre
    const APIDetCategorias  =`https://www.themealdb.com/api/json/v1/1/filter.php?c=${nombre}`;
    console.log(APIDetCategorias);
    try{
        const resp = await fetch(APIDetCategorias)
        if(resp.status===200){
            const datos = await resp.json();
            //console.log(datos)
            renderDetCategorias(datos.meals);
        }else{
            console.log("error del api")
        }

    }catch(error){
        console.log(error);
    }
}
function renderDetCategorias(meals){
    let valor="";
    meals.forEach(element =>{
        valor+=
        `
        <div class="col-lg-2 mb-3">
            <div class="card h-100">
                <div class="card-header p-0">
                    <img src="${element.strMealThumb}" class="card-img-top" alt="...">
                </div>
                <div class="card-body">
                    <h5 class="titulo">${element.strMeal}</h5>
                </div>
                <div class="card-footer text-center">
                    <a href="#" class="btn btn-success btn-sm" id="${element.idMeal}" data-bs-toggle="modal" data-bs-target="#detalleModal">Ver Receta</a>
                </div>
            </div>
        </div>
       
        `
   })
   detCategoriasEl.innerHTML=valor
}
detCategoriasEl.addEventListener("click",(e)=>{
    cargarDetalle(e.target.id);
})
const cargarDetalle = async(id)=>{
    const APIReceta  =`https://www.themealdb.com/api/json/v1/1/lookup.php?i=${id}`;
    console.log(APIReceta)
    try{
        const resp = await fetch(APIReceta)
        if(resp.status===200){
            const datos = await resp.json();
            //console.log(datos)
            renderDetalle(datos.meals);
        }else{
            console.log("error del api")
        }

    }catch(error){
        console.log(error);
    }
}
function renderDetalle(meals){
    let valor="";
    console.log(meals)
    meals.forEach(element =>{
        //cargarTraductor(element.strInstructions)
        let texto = element.strInstructions.replace('/./g', '.<br/><br/>');

        console.log(texto)
        valor+=
        `
        <div class="col-md-4">
            <img src="${element.strMealThumb}" class="card-img-top" alt="...">
            <a href="${element.strYoutube}" class="btn btn-info d-grid mt-3" target="_black">Ver Video</a>
        </div>
        <div class="col-md-8">
            <h4><b>Plato:</b> ${element.strMeal}</h4>
            <h5><b>Categoria:</b> ${element.strCategory}</h5>
            <h5><b>Tipo de Comida:</b> ${element.strArea}</h5>
            <p><b>Instrucciones:</b><br/> ${texto}</p>
        </div>

       
        `
   })
   verDetallleEl.innerHTML=valor
}

const cargarTraductor = async(text)=>{
    let text2="Toss the beef and flour together in a bowl with some salt and black pepper";
    const APITraductor  =`https://api.mymemory.translated.net/get?q=${text2}&langpair=en|es`;
    console.log(APITraductor)
    try{
        const resp = await fetch(APITraductor)
        if(resp.status===200){
            const datos = await resp.json();
            console.log(datos.responseData)
            //renderDetalle(datos);
        }else{
            console.log("error del api")
        }

    }catch(error){
        console.log(error);
    }
}