use leptos::*;
use leptos_use::docs::demo_or_body;
use leptos_use::{use_intl_number_format, NumberStyle, UseIntlNumberFormatOptions};

#[component]
fn Demo(cx: Scope) -> impl IntoView {
    let (number, set_number) = create_signal(cx, 123456.78);

    let de_nf = use_intl_number_format(
        UseIntlNumberFormatOptions::default()
            .locale("de-DE")
            .style(NumberStyle::Currency)
            .currency("EUR"),
    );
    let de_num = de_nf.format::<f64>(cx, number);

    let ja_nf = use_intl_number_format(
        UseIntlNumberFormatOptions::default()
            .locale("ja-JP")
            .style(NumberStyle::Currency)
            .currency("JPY"),
    );
    let ja_num = ja_nf.format::<f64>(cx, number);

    let in_nf = use_intl_number_format(
        UseIntlNumberFormatOptions::default()
            .locale("en-IN")
            .maximum_significant_digits(3),
    );
    let in_num = in_nf.format::<f64>(cx, number);

    view! { cx,
        <input
            class="block"
            prop:value=number
            on:input=move |e| set_number(event_target_value(&e).parse().unwrap())
            type="range"
            min="-1000000"
            max="1000000"
            step="0.01"
        />
        <p>"Number: " { number }</p>
        <p>"German currency (EUR): " { de_num }</p>
        <p>"Japanese currency (JPY): " { ja_num }</p>
        <p>"Indian 3 max significant digits: " { in_num }</p>
    }
}

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