use yew::prelude::*;

pub enum Msg {
    CloseModal,
    Save,
}

#[derive(Properties, PartialEq)]
pub struct NewUserModalProps {
    pub close: Callback<()>,
    pub active: bool,
}

pub struct NewUserModal {
    username: NodeRef,
    admin: NodeRef,
}

impl Component for NewUserModal {
    type Message = Msg;
    type Properties = NewUserModalProps;

    fn create(_ctx: &Context<Self>) -> Self {
        Self {
            username: NodeRef::default(),
            admin: NodeRef::default(),
        }
    }

    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            Msg::CloseModal => {
                ctx.props().close.emit(());
                false
            }
            Msg::Save => {
                log::debug!("self.username = {:?}", self.username);
                log::debug!("self.admin = {:?}", self.admin);

                true
            }
        }
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        let close = ctx.link().callback(|_| Msg::CloseModal);

        html! {
            <div class={classes!("modal", if ctx.props().active { Some("is-active") } else { None })}>
                <div onclick={close.clone()}
                    class={classes!("modal-background")}
                />
                <div class={classes!("modal-card")}>
                    <header class={classes!("modal-card-head")}>
                        <p class={classes!("modal-card-title")}>{ "Neuer Benutzer" }</p>
                        <button onclick={close.clone()} class={classes!("delete")} aria-label="close" />
                    </header>

                    <section class={classes!("modal-card-body")}>
                        <form onsubmit={ctx.link().callback(|e: SubmitEvent| { e.prevent_default(); Msg::Save })}>
                            <div class={classes!("field")}>
                            </div>
                        </form>
                    </section>

                    <footer class={classes!("modal-card-foot")}>
                        <button onclick={close} class={classes!("button")}>{ "Abbrechen" }</button>
                        <button class={classes!("button", "is-success")}>{ "Speichern" }</button>
                    </footer>
                </div>
            </div>
        }
    }
}