use leptos::*;

#[leptos::component]
pub fn homepage() -> impl leptos::IntoView {
    let demo_data = create_resource(
        || (),
        |_| async move {
            let res = reqwasm::http::Request::get("/api/demos/list")
                .send()
                .await
                .unwrap();
            let demos: Vec<common::BaseDemoInfo> = res.json().await.unwrap();
            demos
        },
    );

    view! {
        <div>
            <div>
                <h2>Demos</h2>
            </div>
            <DemoList demos=demo_data />
        </div>
    }
}

#[leptos::component]
fn demo_list(demos: impl SignalGet<Value = Option<Vec<common::BaseDemoInfo>>> + 'static) -> impl leptos::IntoView {
    let style = stylers::style! {
        "DemoList",
        .list {
            display: inline-grid;

            grid-template-columns: auto auto auto;
            row-gap: 1ch;
        }
    };

    view! {
        class=style,
        <div class="list">
            <span>Score</span>
            <span>Date</span>
            <span>Map</span>

            { move || demos.get().unwrap_or_default().into_iter().enumerate().map(|(i, demo)| view! { <DemoListEntry demo idx=i+1 /> }).collect::<Vec<_>>() }
        </div>
    }
}

#[leptos::component]
fn demo_list_entry(demo: common::BaseDemoInfo, idx: usize) -> impl leptos::IntoView {
    let style = stylers::style! {
        "DemoListEntry",
        .entry {
            display: inline-block;

            border: solid #030303aa 1px;

            grid-column: 1 / 4;
            width: 100%;
            height: 100%;
        }

        .score, .map {
            padding-left: 5px;
            padding-right: 5px;

            margin-top: auto;
            margin-bottom: auto;
        }
        .score {
            grid-column: 1;
            font-size: 20px;
        }
        .date {
            grid-column: 2;
        }
        .map {
            grid-column: 3;
        }

        .date {
            display: inline-grid;

            grid-template-columns: auto;
            grid-template-rows: auto auto;
        }
    };

    view! {
        class=style,
            <span class="score" style=format!("grid-row: {};", idx + 1)>{demo.team2_score}:{demo.team3_score}</span>
            <div class="date" style=format!("grid-row: {};", idx + 1)>
                <span>{demo.uploaded_at.format("%Y-%m-%d").to_string()}</span>
                <span>{demo.uploaded_at.format("%H-%M-%S").to_string()}</span>
            </div>
            <span class="map" style=format!("grid-row: {};", idx + 1)>{demo.map}</span>
            <a class="entry" href=format!("demo/{}/scoreboard", demo.id) style=format!("grid-row: {};", idx + 1)></a>
    }
}