use crate::components::{Hand, BiddingTable, BiddingBox};
use crate::use_app_context;
use crate::utils::ok_json;
use anyhow::Context;
use gloo_net::http::Request;
use log::info;
use protocol::bridge_engine::GameStatePlayerView;
use yew::prelude::*;

#[function_component(OnlineTable)]
pub fn online_table(props: &OnlineTableProps) -> Html {
    let ctx = use_app_context();

    let table_state: UseStateHandle<Option<GameStatePlayerView>> = use_state(|| None);
    {
        // TODO update this from server state
        let table_state = table_state.clone();
        let props = props.clone();
        let ctx = ctx.clone();
        use_effect_with_deps(
            move |_| {
                ctx.spawn_async(async move {
                    let response = Request::get(&format!("/api/table/{}", props.table.id))
                        .send()
                        .await
                        .context("fetching table data")?;
                    let table = ok_json(response).await?;
                    table_state.set(Some(table));
                    Ok(())
                });
                || ()
            },
            (),
        );
    }

    let leave_table = {
        let ctx = ctx.clone();
        Callback::from(move |_| {
            ctx.leave_table();
        })
    };

    html! {
    <>
        <p>{ format!("This is table {}", props.table.id) }</p>
        <button onclick={leave_table}>
            { "Leave table" }
        </button>
        if let Some(table_state) = &*table_state {
            <Table table={ table_state.clone() }/>
        }
    </>
    }
}

#[derive(PartialEq, Properties, Clone)]
pub struct OnlineTableProps {
    pub table: protocol::Table,
}

#[function_component(Table)]
pub fn table(props: &TableProps) -> Html {
    let on_card_clicked = {
        Callback::from(move |card| {
            info!("Card clicked: {}", card);
        })
    };
    let on_bid = {
        Callback::from(move |bid| {
            info!("Bid clicked: {:?}", bid);
        })
    };
    let center = match &props.table {
        GameStatePlayerView::Bidding {
            bidding,
            ..
        } => html! {
            <>
                <BiddingTable bidding={bidding.clone()} />
                <BiddingBox current_bid={bidding.highest_bid().clone()} { on_bid } />
            </>
        },
        GameStatePlayerView::PassedOut {
            ..
        } => todo!(),
        GameStatePlayerView::Lead {
            ..
        } => todo!(),
        GameStatePlayerView::Play {
            ..
        } => todo!(),
    };
    html! {
        <>
            <div class="center">
                { center }
            </div>
            <div class="hand south">
                <Hand cards={ props.table.hand().clone() } on_card_clicked={ on_card_clicked.clone() } />
            </div>
            <h2>{ "Table view" }</h2>
            <pre>{ format!("{:#?}", props.table) }</pre>
        </>
    }
}

#[derive(PartialEq, Properties, Clone)]
pub struct TableProps {
    pub table: GameStatePlayerView,
}