use leptos::*;
use crate::backend::data::{Message, MessageType};
use crate::backend::mail::{get_message, UpdateMessage};
use crate::components::data_form::DataForm;
use crate::components::modal_box::DialogOpener;
use crate::locales::trl;

#[component]
fn mail_edit(opener: DialogOpener, mail: ReadSignal<Message>) -> impl IntoView {
    let update = create_server_action::<UpdateMessage>();

    view! {
        <DataForm opener=opener title="Edit mail" action=update>
            <input type="hidden" prop:value={move || mail.get().id()} name="message[id]"/>
            <input type="hidden" prop:value={move || mail.get().msg_type.to_string()} name="message[msg_type]"/>
            <div class="row">
                <div class="col mb-3">
                    <label  for="subject" class="form-label">{trl("Subject")}</label>
                    <input
                        type="text"
                        id="nameWithTitle"
                        class="form-control"
                        placeholder="Enter Subject"
                        prop:value={move || mail.get().subject}
                        name="message[subject]"
                    />
                </div>
            </div>
            <div class="row">
                <div class="col mb-3">
                    <label  for="text" class="form-label">"Text"</label>
                    <textarea
                        id="text"
                        class="form-control"
                        prop:value={move || mail.get().text}
                        name="message[text]"
                    />
                </div>
            </div>
        </DataForm>
    }
}

#[component]
pub fn mail_view(title: &'static str, mail_type: MessageType) -> impl IntoView {
    let editor = DialogOpener::new();
    let mail = create_blocking_resource( move || editor.visible(), move |_| get_message(mail_type.clone()));
    let for_edit = create_rw_signal(Message::default());

    view! {
        <MailEdit opener=editor mail={for_edit.read_only()}/>
        <div class="card mb-3">
        <div class="card-body">
            <h5 class="card-title"><i class="bx bx-buildings"></i>" "{trl(title)}</h5>
            <p class="card-text">
                <Transition fallback=move || view! {<p>{trl("Loading...")}</p> }>
                {
                    mail.get().map(|m| match m {
                    Ok(m) => {
                        for_edit.set(m.clone());
                        view! {
                            <div>
                                <p>{trl("Subject: ")}{m.subject}</p>
                                <p>{m.text}</p>
                            </div>
                        }
                    }
                    Err(_) => {
                        view! {
                            <div>"Error loading data"</div>
                        }
                    }})
                }
                </Transition>
            </p>
            <a href="javascript:void(0)" class="card-link" on:click = move |_| editor.show()>
                <i class="bx bx-edit-alt fs-4 lh-0"></i></a>
        </div>
        </div>
    }
}