use leptos::*;
use leptos_use::use_media_query;
use crate::backend::data::{ApiResponse, ResProperty};
use crate::backend::property::get_properties;
use crate::components::modal_box::DialogOpener;
use crate::components::user_menu::MenuOpener;
use crate::locales::trl;
use crate::pages::property_delete::PropertyDelete;
use crate::pages::property_edit::PropertyEdit;

#[component]
pub fn properties() -> impl IntoView {
    let is_wide = use_media_query("(min-width: 500px)");
    let properties = create_rw_signal::<Vec<ResProperty>>(vec![]);
    let prop = create_rw_signal(ResProperty::default());
    let empty_prop = create_rw_signal(ResProperty::default());
    let create_form = DialogOpener::new();
    let edit_form = DialogOpener::new();
    let delete_dlg = DialogOpener::new();
    let props = create_blocking_resource(move || create_form.visible() || edit_form.visible() || delete_dlg.visible(), move |_| get_properties());

    view! {
        <PropertyEdit property=prop.read_only() opener=edit_form edit=true/>
        <PropertyEdit property=empty_prop.read_only() opener=create_form edit=false/>
        <PropertyDelete property=prop.read_only() opener=delete_dlg/>
        <div class="card mb-3">
        <div class="card-body">
            <h5 class="card-title"><i class="bx bx-basket"></i>" "{trl("Properties")}</h5>
            <Transition fallback=move || view! {<p>{trl("Loading...")}</p> }>
            <table class="table card-table">
                <thead>
                    <tr>
                        <th>{trl("Name")}</th>
                        {move || if is_wide.get() {view! {<th>{trl("Description")}</th>}}
                            else {view! {<th></th>}} }
                        <th>{trl("Price")}</th>
                        <th>{trl("Actions")}</th>
                    </tr>
                </thead>
        {move || {
                props.get().map(|u| match u {
                    Err(e) => {
                        view! {<tbody class="table-border-bottom-0">
                        <tr><td colspan=4>{trl("Something went wrong")}<br/>{e.to_string()}</td></tr></tbody>}}
                    Ok(u) => {
                        match u {
                            ApiResponse::Data(p) => {
                            properties.set(p.clone());
                            view! {<tbody class="table-border-bottom-0">
                                    <For each=move || properties.get()
                                        key=|prop| prop.id()
                                        let:data>
                                        {move || {
                                            let menu = MenuOpener::new();
                                            let data = data.clone();
                                            let prop_for_edit = data.clone();
                                            let prop_for_delet = data.clone();
                                        view! {
                                        <tr>
                                            <td>{data.name.clone()}</td>
                                            {move || if is_wide.get() {view! {<td>{data.description.clone()}</td>}}
                                                else {view! {<td></td>}} }
                                            <td>{data.price.to_string()}</td>
                                            <td>
                                                <div class="dropdown">
                                                    <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>
                                                    <div class={move || if menu.visible() {"dropdown-menu show"} else {"dropdown-menu"} }
                                                    style="position: absolute; insert: 0px 0px auto; margin: 0px; transform: translate3d(-160px, 0px, 0px);"
                                                    on:mouseleave=move |_| menu.toggle()>
                                                        <a class="dropdown-item" href="javascript:void(0);" on:click=move |_| {
                                                                prop.set(prop_for_edit.clone());
                                                                edit_form.show();
                                                            }>
                                                            <i class="bx bx-edit-alt me-1"></i> {trl("Edit")}</a>
                                                        <a class="dropdown-item text-danger" href="javascript:void(0);" on:click=move |_| {
                                                                prop.set(prop_for_delet.clone());
                                                                delete_dlg.show();
                                                            }>
                                                            <i class="bx bx-trash me-1"></i> {trl("Delete")}</a>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>}
                                            }}
                                    </For>
                                </tbody>
                            }
                            },
                            ApiResponse::Error(s) => {
                                view! {<tbody class="table-border-bottom-0">
                                <tr><td colspan=4>{trl(&s)}</td></tr></tbody>}
                            }
                        }
                    }
                })
                }
            }
            </table>
            </Transition>
            <a href="#" class="card-link" on:click=move |_| {
                empty_prop.set(ResProperty::default());
                create_form.show();}>
                <i class="bx bx-plus-circle fs-4 lh-0"></i>
            </a>
        </div>
        </div>
    }
}