use leptos::{
    IntoView, component,
    prelude::{ClassAttribute, ElementChild, OnAttribute},
    view,
};
use leptos_router::{NavigateOptions, components::A, hooks::use_navigate};
use log::info;
use rocie_client::models::{Recipe, RecipeParent};

use crate::{
    api::{
        recipe_parents_toplevel_wrapped, recipe_parents_under_404_wrapped,
        recipes_by_recipe_parent_id_direct_wrapped, recipes_by_recipe_parent_id_indirect_wrapped,
        recipes_without_recipe_parent_wrapped,
    },
    components::{
        async_fetch::{AsyncFetch, AsyncResource},
        catch_errors::CatchErrors,
        login_wall::LoginWall,
        site_header::SiteHeader,
    },
    pages::mk_render_parents,
};

#[component]
pub fn Recipies() -> impl IntoView {
    view! {
        <CatchErrors>
            <LoginWall back=move || "/recipies".to_owned()>
                <SiteHeader logo=icondata_io::IoArrowBack back_location="/" name="Recipies" />
                <ul class="flex flex-col p-2 m-2">
                    {
                        AsyncFetch! {
                            @map_error_in_producer
                            from_resource = AsyncResource!(
                                () -> Result<(Vec<RecipeParent>, Vec<Recipe>), leptos::error::Error> {
                                    Ok((
                                        recipe_parents_toplevel_wrapped().await?,
                                        recipes_without_recipe_parent_wrapped().await?
                                    ))
                                }
                            ),
                            producer = |(parents, toplevel_recipes)| {
                                render_recipe_parents(Some(parents), Some(toplevel_recipes))
                            },
                        }
                    }
                </ul>
            </LoginWall>
        </CatchErrors>
    }
}

mk_render_parents!(
    self = render_recipe_parents,
    parent_type = RecipeParent,
    item_type = Recipe,
    value_renderer = render_recipes,
    under_parent_fetcher = recipe_parents_under_404_wrapped,
    indirect_fetcher = recipes_by_recipe_parent_id_indirect_wrapped,
    direct_fetcher = recipes_by_recipe_parent_id_direct_wrapped,
);

fn render_recipes(recipes: Vec<Recipe>) -> impl IntoView {
    recipes
        .into_iter()
        .map(|recipe| {
            let name = recipe.name.clone();
            view! {
                <li>
                    <A href=move || format!("/recipe/{name}")>{recipe.name}</A>
                </li>
            }
        })
        .collect::<Vec<_>>()
}