use leptos::{html::Input, prelude::*};
use web_sys::File;

#[component]
pub fn FileSelect<F>(
    #[prop(into, optional)] class: Signal<String>,
    #[prop(into, optional)] style: Signal<String>,
    on_file_select: F,
    children: Children,
) -> impl IntoView
where
    F: Fn(File) + 'static,
{
    let file_input = NodeRef::<Input>::new();

    let select_file = move |_| {
        if let Some(file_input) = file_input.get() {
            file_input.click()
        }
    };

    let on_change = move |_| {
        if let Some(file_input) = file_input.get() {
            if let Some(files) = file_input.files() {
                if let Some(file) = files.get(0) {
                    on_file_select(file);
                }
            }
        }
    };

    view! {
        <div on:click=select_file class=class style=style>
            {children()}
            <input node_ref=file_input type="file" accept="gpx,csv" on:change=on_change hidden />
        </div>
    }
}