use leptos::*;
use leptos_use::docs::demo_or_body;
use leptos_use::on_click_outside;

#[component]
fn Demo(cx: Scope) -> impl IntoView {
    let (show_modal, set_show_modal) = create_signal(cx, false);
    let modal_ref = create_node_ref(cx);

    let _ = on_click_outside(cx, modal_ref, move |_| set_show_modal.set(false));

    view! { cx,
        <button on:click=move |_| set_show_modal.set(true)>"Open Modal"</button>

        <Show when=move || show_modal.get() fallback=|_| ()>
            <div node_ref=modal_ref class="modal">
                <div class="inner">
                    <button class="button small" title="Close" on:click=move |_| set_show_modal.set(false)>"𝖷"</button>
                    <p class="heading">"Demo Modal"</p>
                    <p>"Click outside this modal to close it."</p>
                </div>
            </div>
        </Show>

        <style>"
.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  max-width: 100%;
  z-index: 10;
}
.inner {
  background-color: var(--bg);
  padding: 0.4em 2em;
  border-radius: 5px;
  border: 1px solid var(--theme-popup-border);
  box-shadow: 2px 2px 10px rgba(10, 10, 10, 0.1);
}
.dropdown-inner {
  background-color: var(--bg);
  padding: 0.5em;
  position: absolute;
  left: 0;
  z-index: 10;
  border-radius: 5px;
  border: 1px solid var(--theme-popup-border);
  box-shadow: 2px 2px 5px rgba(10, 10, 10, 0.1);
}
.heading {
  font-weight: bold;
  font-size: 1.4rem;
  margin-bottom: 2rem;
}
.modal > .inner > .button {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  font-weight: bold;
}
        "</style>
    }
}

fn main() {
    _ = console_log::init_with_level(log::Level::Debug);
    console_error_panic_hook::set_once();

    mount_to(demo_or_body(), |cx| {
        view! { cx, <Demo /> }
    })
}