use leptos::*;
use leptos_router::*;
use crate::backend::data::{ApiResponse, User};
use crate::backend::user::ChangePwd;
use crate::components::modal_box::{DialogOpener, ModalBody, ModalDialog, ModalFooter};
use crate::components::server_err::ServerErr;
use crate::components::validation_err::ValidationErr;
use crate::locales::trl;
use crate::validator::Validator;

#[component]
pub fn change_password(user: ReadSignal<User>, opener: DialogOpener) -> impl IntoView {
    let change_pwd = create_server_action::<ChangePwd>();
    let upd_val = change_pwd.value();
    let validator = Validator::new();
    let empty = create_rw_signal("".to_string());

    view! {
        {move || {
            if let Some(res) = upd_val.get() {
                if let Ok(r) = res {
                    if let ApiResponse::Data(_) = r { empty.update(|e| *e = "".to_string())}
                }
            }
            view! {
                <ActionForm
            on:submit=move |ev| {
                let act = ChangePwd::from_event(&ev);
                if !act.is_err() {
                    validator.check(&act.unwrap().new_pw, &ev);
                }
            }
            action=change_pwd>
        <ModalDialog opener=opener title="Change password">
            <ModalBody>
                <ServerErr result={upd_val} opener=opener/>
                <ValidationErr validator=validator />
                <input type="hidden" value={move || user.get().login} name="new_pw[login]"/>
                <div class="row">
                    <div class="col mb-3">
                        <label  for="oldPw" class="form-label">"Old password"</label>
                        <input
                            type="password"
                            id="oldPw"
                            class="form-control"
                            name="new_pw[old_password]"
                            prop:value={move || empty.get()}
                        />
                    </div>
                </div>
                <div class="row">
                    <div class="col mb-3">
                        <label  for="newPw" class="form-label">"New password"</label>
                        <input
                            type="password"
                            id="newPw"
                            class="form-control"
                            name="new_pw[password]"
                            prop:value={move || empty.get()}
                        />
                    </div>
                </div>
                <div class="row">
                    <div class="col mb-3">
                        <label  for="verPw" class="form-label">"Verify password"</label>
                        <input
                            type="password"
                            id="verPw"
                            class="form-control"
                            name="new_pw[password_ver]"
                            prop:value={move || empty.get()}
                        />
                    </div>
                </div>
            </ModalBody>
            <ModalFooter>
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"
                    on:click=move |_| {validator.reset(); opener.hide(); empty.update(|e| *e = "".to_string())}>
                    {trl("Close")}
                </button>
                <button type="submit" class="btn btn-primary">
                    {trl("Save changes")}
                </button>
            </ModalFooter>
        </ModalDialog>
        </ActionForm>
            }
        }}
    }
}