use chrono::Local;
use leptos::*;
use crate::backend::data::ClosingTime;
use crate::backend::opening_hours::{get_closing_times, DeleteClosingTime, InsertClosingTime};
use crate::components::data_form::{DataForm, QuestionDialog};
use crate::components::modal_box::DialogOpener;
use crate::locales::{loc_date, trl};

#[component]
pub fn del_closing_day(closing_time: ReadSignal<ClosingTime>, opener: DialogOpener) -> impl IntoView {
    let delete = create_server_action::<DeleteClosingTime>();

    view! {
        <QuestionDialog opener=opener action=delete title="Delete closing days">
            <input type="hidden" prop:value={move || closing_time.get().id()} name="id"/>
            <div>{trl("Are you sure you want to delete closing days from ")}{move || loc_date(closing_time.get().from_date)}{trl(" to ")}{move || loc_date(closing_time.get().to_date)}"?"</div>
        </QuestionDialog>
    }
}

#[component]
pub fn insert_closing_days(opener: DialogOpener) -> impl IntoView {
    let insert_day = create_server_action::<InsertClosingTime>();

    view! {
        <DataForm opener=opener action=insert_day title="Closing days">
            <input type="hidden" value=0 name="time[id]"/>
            <div class="row">
                <div class="col mb-3">
                    <label  for="from_day" class="form-label">{trl("From")}</label>
                    <input
                        type="date"
                        id="from_day"
                        class="form-control"
                        prop:value={move || Local::now().date_naive().format("%Y-%m-%d").to_string()}
                        name="time[from_date]"
                    />
                    <label  for="to_day" class="form-label">{trl("To")}</label>
                    <input
                        type="date"
                        id="to_day"
                        class="form-control"
                        prop:value={move || Local::now().date_naive().format("%Y-%m-%d").to_string()}
                        name="time[to_date]"
                    />
                </div>
            </div>
        </DataForm>
    }
}
#[component]
pub fn closing_days() -> impl IntoView {
    let delete_dialog = DialogOpener::new();
    let editor = DialogOpener::new();
    let times = create_blocking_resource(move || editor.visible() || delete_dialog.visible(), move |_| {get_closing_times()});
    let time_to_del = create_rw_signal(ClosingTime::default());
    view! {
        <DelClosingDay closing_time=time_to_del.read_only() opener=delete_dialog/>
        <InsertClosingDays opener=editor/>
        <div class="card mb-3">
        <div class="card-body">
            <h5 class="card-title"><i class="bx bx-calendar-x"></i>" "{trl("Closing days")}</h5>
            <Transition fallback=move || view! {<p>{trl("Loading...")}</p> }>
            <table class="table card-table">
                <thead>
                    <tr>
                        <th>{trl("From")}</th>
                        <th>{trl("To")}</th>
                        <th>{trl("Actions")}</th>
                    </tr>
                </thead>
            {move || {
                times.get().map(|c| match c {
                    Err(e) => {
                        let err = if e.to_string().contains("403") {
                            "Only admin can edit closing times".to_string()
                        } else {
                            e.to_string()
                        };
                        view! {<tbody class="table-border-bottom-0">
                        <tr><td colspan=3>{trl(&err)}</td></tr></tbody>}}
                    Ok(c) => {
                        view! {<tbody class="table-border-bottom-0">
                            <For each=move || c.clone()
                                key=|ct| ct.id()
                                children=move |ct: ClosingTime| {
                                let ct_delete = ct.clone();
                                view! {
                                    <tr>
                                        <td>{loc_date(ct.from_date)}</td>
                                        <td>{loc_date(ct.to_date)}</td>
                                        <td>
                                            <a class="dropdown-item text-danger" href="javascript:void(0);" on:click=move |_| {
                                                        time_to_del.set(ct_delete.clone());
                                                        delete_dialog.show();
                                                    }>
                                                    <i class="bx bx-trash me-1"></i> {trl("Delete")}</a>

                                        </td>
                                    </tr>
                                }
                            }/></tbody>
                        }
                    }
                })
            }}
            </table>
            </Transition>
            <a href="#" class="card-link" on:click=move |_| editor.show()>
                <i class="bx bx-plus-circle fs-4 lh-0"></i>
            </a>

        </div>
        </div>
    }
}