use leptos::*;
use crate::backend::data::User;
use crate::backend::user::{get_user, UpdateProfile};
use crate::components::data_form::DataForm;
use crate::components::modal_box::DialogOpener;
use crate::locales::trl;

#[component]
pub fn ProfileEdit(user: ReadSignal<User>, opener: DialogOpener) -> impl IntoView {
    let update_user = create_server_action::<UpdateProfile>();
    let logged_in = create_resource(||(), move |_| get_user());

    view! {
        <DataForm opener=opener action=update_user title="Edit profile">
            <input type="hidden" prop:value={move || user.get().login} name="user[login]"/>
            <div class="row">
                <div class="col mb-3">
                    <label  for="name" class="form-label">{trl("Full name")}</label>
                    <input
                        type="text"
                        id="name"
                        class="form-control"
                        placeholder={trl("Enter full name")}
                        prop:value={move || user.get().full_name}
                        name="user[full_name]"
                    />
                </div>
            </div>
            <div class="row">
                <div class="col mb-3">
                    <label  for="email" class="form-label">"Email"</label>
                    <input
                        type="text"
                        id="name"
                        class="form-control"
                        placeholder={trl("Enter email")}
                        prop:value={move || user.get().email.unwrap_or("".to_string())}
                        name="user[email]"
                    />
                </div>
            </div>
            <div class="row">
                <div class="col mb-3">
                    <input
                        class="form-check-input"
                        type="checkbox"
                        id="getMail"
                        prop:value={move || if user.get().get_emails {"true"} else {"false"}}
                        prop:checked={move || user.get().get_emails}
                        name="user[get_emails]"
                    />
                    <label class="form-check-label" for="getMail">{trl("Get emails")}</label>
                </div>
            </div>
            <Suspense fallback=move || view! {<div></div>}>
            <div class="row" style={move || {
                logged_in.get().map(|u| match u {
                        Ok(usr) => {
                            let usr = usr.unwrap_or_default();
                            if usr.login == user.get().login && !usr.login.is_empty() { "display: none" }
                                else {""}
                        }
                        Err(_) => ""
                    })
                } }>
                <div class="col mb-3">
                    <input
                        class="form-check-input"
                        type="checkbox"
                        id="admin"
                        prop:value={move || if user.get().admin {"true"} else {"false"}}
                        prop:checked={move || user.get().admin}
                        name="user[admin]"
                        //disabled
                    />
                    <label class="form-check-label" for="admin">"Admin"</label>
                </div>
            </div>
            </Suspense>
        </DataForm>
    }
}