use chrono::{Datelike, Local};
use leptos::*;
use crate::backend::data::ApiResponse;
use crate::backend::reservation::{month_chart, reservations_in_month, year_chart, years};
use crate::locales::{loc_date, trl};

#[component]
pub fn bookings() -> impl IntoView {
    let year_chart = create_blocking_resource(||(), |_| year_chart());
    let years = create_blocking_resource(||(), |_| years());
    let year = create_rw_signal(Local::now().year());
    let month = create_rw_signal(Local::now().month());
    let chart = create_blocking_resource(move || year.get(),move |y| month_chart(y));
    let reservations = create_blocking_resource(move || (year.get(), month.get()), move |p| reservations_in_month(p.0, p.1));
    let all_months: Vec<u32> = vec![1,2,3,4,5,6,7,8,9,10,11,12];

    view! {
        <h1>{trl("Booking overview")}</h1>
        <nav class="navbar navbar-expand-lg navbar-light bg-light mb-5">
            <div class="container-fluid">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <div class="nav-link">
                        "Rok: "
                        </div>
                    </li>
                    <li class="nav-item">
                        <Transition fallback=move || view! {<div>"Loading"</div>} >
                        {
                            years.get().map(|y| match y {
                                Ok(y) => {
                                    view! {
                                    <select class="form-select" on:change=move |ev| {
                                        let new_value = event_target_value(&ev).parse::<i32>().unwrap_or_default();
                                        year.set(new_value);
                                    }>
                                    <For each=move || y.clone() key=|i| *i let:y>
                                        <option prop:value=move || y prop:selected=move || year.get() == y>{y}</option>
                                    </For>
                                    </select>
                                    }
                                }
                                Err(_) => {view! {<select><option></option></select>}}
                            })
                        }
                        </Transition>
                    </li>
                    <li class="nav-item">
                        <div class="nav-link">
                        "Měsíc: "
                        </div>
                    </li>
                    <li class="nav-item">
                        <select class="form-select" on:change=move |ev| {
                            let new_value = event_target_value(&ev).parse::<u32>().unwrap_or_default();
                            month.set(new_value);
                        }>
                            <For each=move || all_months.clone() key=|i| *i let:m>
                                <option prop:value=move || m prop:selected=move || month.get() == m>{m}</option>
                            </For>
                        </select>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="row mb-3">
            <div class="col-md">
                <div class="card md-3">
                    <Transition fallback=move || view! {<div>"Loading"</div>}>
                    {
                        chart.get().map(move |c| match c {
                            Ok(c) => { match c {
                                ApiResponse::Data(c) => {view! {<img style="margin: 1em" src={c.clone()} /> }}
                                ApiResponse::Error(_) => {view! {<img src=""/> }} }
                            }
                            Err(_) => { view! {<img src=""/> } }
                        })
                    }
                    </Transition>
                </div>
            </div>
            <div class="col-md">
                <div class="card md-3">
                    <Transition fallback=move || view! {<div>"Loading"</div>}>
                    {
                        year_chart.get().map(move |c| match c {
                            Ok(c) => { match c {
                                ApiResponse::Data(c) => {view! {<img style="margin: 1em" src={c.clone()} /> }}
                                ApiResponse::Error(_) => {view! {<img src=""/> }} }
                            }
                            Err(_) => { view! {<img src=""/> } }
                        })
                    }
                    </Transition>
                </div>
            </div>
        </div>

        <div class="row mb-3">
            <div class="card">
            <div class="card-body">
                <Transition fallback=move || view! {<div>"Loading"</div>}>
                    <table class="table card-table">
                        <thead>
                            <tr>
                                <th>{trl("Date")}</th>
                                <th>{trl("Customer")}</th>
                                <th>{trl("Price")}</th>
                                <th>{trl("State")}</th>
                                <th>{trl("Actions")}</th>
                            </tr>
                        </thead>
                        {
                            reservations.get().map(|r| match r {
                                Ok(r) => { match r {
                                        ApiResponse::Data(r) => {
                                            view! {
                                                <tbody class="table-border-bottom-0">
                                                    <For each=move || r.clone()
                                                        key=|i| i.summary.id()
                                                        let:data>
                                                        <tr>
                                                            <td>{loc_date(data.summary.date)}</td>
                                                            <td>{data.customer.full_name}</td>
                                                            <td>{data.summary.price.to_string()}</td>
                                                            <td>{data.summary.state.to_string()}</td>
                                                            <td><button type="button" class="btn p-0 dropdown-toggle hide-arrow">
                                                            //on:click=move |_| menu.toggle()>
                                                            <i class="bx bx-dots-vertical-rounded"></i>
                                                        </button></td>
                                                        </tr>
                                                    </For>
                                                </tbody>
                                            }
                                        }
                                        ApiResponse::Error(e) => {
                                            view! {<tbody class="table-border-bottom-0">
                                            <tr><td colspan=5>{trl("Something went wrong")}<br/>{e.to_string()}</td></tr></tbody>}
                                        }
                                    }
                                }
                                Err(e) => {
                                    view! {<tbody class="table-border-bottom-0">
                                    <tr><td colspan=5>{trl("Something went wrong")}<br/>{e.to_string()}</td></tr></tbody>}
                                }
                            })
                        }
                    </table>
                </Transition>
            </div>
            </div>
        </div>
    }
}