use chrono::{Datelike, Local};
use leptos::*;
use crate::backend::data::{ApiResponse, ResSumWithItems};
use crate::backend::reservation::{month_chart, reservations_in_month, year_chart, years};
use crate::components::modal_box::{DialogOpener, ModalBody, ModalDialog};
use crate::locales::{loc_date, show_day, trl};

#[component]
fn booking_detail(reservation: ReadSignal<ResSumWithItems>, opener: DialogOpener) -> impl IntoView {
    view! {
        <ModalDialog title="Booking detail" opener=opener>
            <ModalBody>
                <p>
                {move || {
                    let detail = reservation.get();
                    view! {
                    <b>{show_day(&detail.summary.date.weekday())}" - "{loc_date(detail.summary.date)}</b><br/>
                    <For each=move || detail.reservations.clone()
                        key=|item| item.reservation.id()
                        let:item>
                        {item.property.name}": "{item.reservation.from.to_string()}" - "{item.reservation.to.to_string()}<br/>
                    </For>
                    {trl("Customer: ")}{detail.customer.full_name}", "<a href={format!("mailto:{}", detail.customer.email)}>{detail.customer.email}</a>", "{detail.customer.phone}<br/>
                    {
                        let note = detail.summary.note.clone();
                        let show = note.is_some() && !note.clone().unwrap().is_empty();
                        view! {
                            <Show when=move || show>
                                {trl("Note: ")}{note.clone()}<br/>
                            </Show>
                        }
                    }
                    {trl("Price: ")}{detail.summary.price.to_string()}<br/>
                    }
                }}
                </p>
            </ModalBody>
        </ModalDialog>
    }
}

#[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];
    let res_detail = create_rw_signal(ResSumWithItems::default());
    let detail_dlg = DialogOpener::new();

    view! {
        <h1>{trl("Booking overview")}</h1>
        <BookingDetail reservation=res_detail.read_only() opener=detail_dlg />
        <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">
                        {trl("Year: ")}
                        </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">
                        {trl("Month: ")}
                        </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.clone()}</td>
                                                            <td>{data.summary.price.to_string()}</td>
                                                            <td>{trl(&data.summary.state.to_string())}</td>
                                                            <td><button type="button" class="btn"
                                                                on:click=move |_| {
                                                                    res_detail.set(data.clone());
                                                                    detail_dlg.show();
                                                                }>
                                                            <i class="bx bx-show"></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>
    }
}