use leptos::*;
use leptos_use::docs::{demo_or_body, BooleanDisplay};
use leptos_use::{breakpoints_tailwind, use_breakpoints, BreakpointsTailwind};

#[component]
fn Demo(cx: Scope) -> impl IntoView {
    let breakpoints = breakpoints_tailwind();

    let screen_size = use_breakpoints(cx, breakpoints.clone());

    use BreakpointsTailwind::*;

    let sm_width = *breakpoints.get(&Sm).expect("It's there!");

    let current = screen_size.current();
    let xs = screen_size.lt(Sm);
    let xse = screen_size.le(Sm);
    let sm = screen_size.between(Sm, Md);
    let md = screen_size.between(Md, Lg);
    let lg = screen_size.between(Lg, Xl);
    let xl = screen_size.between(Xl, Xxl);
    let xxl = screen_size.ge(Xxl);

    let label_classes = "justify-self-end".to_string();
    let svg_classes = "align-middle ml-3 mr-1 opacity-60".to_string();

    view! { cx,
        <div class="grid grid-cols-2 gap-x-4 gap-y-3">
            <div class=label_classes.clone()>"Current breakpoints :"</div>
            <code>{move || format!("{:?}", current.get()) }</code>

            <div class=label_classes.clone()>
                <code class="font-bold">"xs"</code>
                <small>
                    " (< "
                    { move || sm_width.to_string() }
                    "px)"
                </small>

                <svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                    <path d="M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z" />
                    <path d="M11 4h2" />
                    <path d="M12 17v.01" />
                </svg>
                ":"
            </div>

            <BooleanDisplay value=xs />

            <div class=label_classes.clone()>
                <code class="font-bold">"xs"</code>
                <small>
                    " (<= "
                    { move || sm_width.to_string() }
                    "px)"
                </small>

                <svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                    <path d="M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z" />
                    <path d="M11 4h2" />
                    <path d="M12 17v.01" />
                </svg>
                ":"
            </div>

            <BooleanDisplay value=xse />

            <div class=label_classes.clone()>
                <code class="font-bold">"sm"</code>

                <svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                  <path d="M3 6m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
                  <path d="M20 11v2" />
                  <path d="M7 12h-.01" />
                </svg>
                ":"
            </div>

            <BooleanDisplay value=sm />

            <div class=label_classes.clone()>
                <code class="font-bold">"md"</code>

                <svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                  <path d="M5 4a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v16a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1v-16z" />
                  <path d="M11 17a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" />
                </svg>
                ":"
            </div>

            <BooleanDisplay value=md />

            <div class=label_classes.clone()>
                <code class="font-bold">"lg"</code>

                <svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                  <path d="M3 19l18 0" />
                  <path d="M5 6m0 1a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1z" />
                </svg>
                ":"
            </div>

            <BooleanDisplay value=lg />

            <div class=label_classes.clone()>
                <code class="font-bold">"xl"</code>

                <svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                  <path d="M3 5a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-10z" />
                  <path d="M7 20h10" />
                  <path d="M9 16v4" />
                  <path d="M15 16v4" />
                </svg>
                ":"
            </div>

            <BooleanDisplay value=xl />

            <div class=label_classes.clone()>
                <code class="font-bold">"xxl"</code>

                <svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                  <path d="M13 16h-9a1 1 0 0 1 -1 -1v-10a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v5.5" />
                  <path d="M7 20h6.5" />
                  <path d="M9 16v4" />
                  <path d="M21 15h-2.5a1.5 1.5 0 0 0 0 3h1a1.5 1.5 0 0 1 0 3h-2.5" />
                  <path d="M19 21v1m0 -8v1" />
                </svg>
                ":"
            </div>

            <BooleanDisplay value=xxl />
        </div>
    }
}

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 /> }
    })
}