use crate::util::surrealdb::{client::Time, schemas};
use leptos::*;

/// Renders the home page of your application.
#[component]
pub fn Modal() -> impl IntoView {
    let participant_id = use_context::<RwSignal<Option<String>>>().unwrap();
    let participants = use_context::<schemas::ParticipantsContext>().unwrap();

    let participant = move || {
        let x = participants
            .get()
            .into_iter()
            .filter(|item| item.id == participant_id.get().unwrap_or("".to_string()))
            .collect::<Vec<schemas::ParticipantSignal>>();

        match x.get(0) {
            Some(participant) => Some(participant.value),
            None => None,
        }
    };

    let time_lifesaver = create_rw_signal(Time {
        minutes: 0,
        seconds: 0,
        milliseconds: 0,
    });

    let time_hindernis = create_rw_signal(Time {
        minutes: 0,
        seconds: 0,
        milliseconds: 0,
    });

    let time_popduiken = create_rw_signal(Time {
        minutes: 0,
        seconds: 0,
        milliseconds: 0,
    });

    view! {
        { move || match participant() {
            Some(p) => view! {
                <div class="modal-background">
                    <div class="modal">
                        <form>
                            <h2>"Deelnemer bewerken"</h2>
                            <label>Naam</label>
                            <input type="text" name="name" autocomplete="off" />
                            <label>Groep</label>
                            <select name="group" autocomplete="off">
                                <option value="A1">A1</option>
                                <option value="A2">A2</option>
                                <option value="A3">A3</option>
                                <option value="A4">A4</option>
                                <option value="A5">A5</option>
                                <option value="A6">A6</option>

                                <option value="B1">B1</option>
                                <option value="B2">B2</option>
                                <option value="B3">B3</option>
                                <option value="B4">B4</option>
                                <option value="B5">B5</option>
                                <option value="B6">B6</option>

                                <option value="C1">C1</option>
                                <option value="C2">C2</option>
                                <option value="C3">C3</option>
                                <option value="C4">C4</option>
                                <option value="C5">C5</option>
                                <option value="C6">C6</option>

                                <option value="D1">D1</option>
                                <option value="D2">D2</option>
                                <option value="D3">D3</option>
                                <option value="D4">D4</option>
                                <option value="D5">D5</option>
                                <option value="D6">D6</option>

                                <option value="Z1">Z1</option>
                                <option value="Z2">Z2</option>
                                <option value="Z3">Z3</option>
                                <option value="Z4">Z4</option>
                                <option value="Z5">Z5</option>
                                <option value="Z6">Z6</option>
                            </select>
                            <label>Tijd Lifesaver</label>
                            <div class="time">
                                <input type="number"
                                    autocomplete="off"
                                    placeholder="mm"
                                    min=0
                                    max=99
                                    on:input=move |ev| {
                                        time_lifesaver.update(|time| time.minutes = match event_target_value(&ev).parse::<u32>() {
                                            Ok(x) => x,
                                            Err(_) => 0,
                                        });
                                    }
                                    prop:value=move || time_lifesaver.get().minutes
                                />
                                <input type="number"
                                    autocomplete="off"
                                    placeholder="ss"
                                    min=0
                                    max=59
                                    on:input=move |ev| {
                                        time_lifesaver.update(|time| time.seconds = match event_target_value(&ev).parse::<u32>() {
                                            Ok(x) => x,
                                            Err(_) => 0,
                                        });
                                    }
                                    prop:value=move || time_lifesaver.get().seconds
                                />
                                <input type="number"
                                    autocomplete="off"
                                    placeholder="ms"
                                    min=0
                                    max=99
                                    on:input=move |ev| {
                                        time_lifesaver.update(|time| time.milliseconds = match event_target_value(&ev).parse::<u32>() {
                                            Ok(x) => x,
                                            Err(_) => 0,
                                        });
                                    }
                                    prop:value=move || time_lifesaver.get().milliseconds
                                />
                            </div>
                            <label>Tijd Hindernis</label>
                            <div class="time">
                                <input type="number"
                                    autocomplete="off"
                                    placeholder="mm"
                                    min=0
                                    max=99
                                    on:input=move |ev| {
                                        time_hindernis.update(|time| time.minutes = match event_target_value(&ev).parse::<u32>() {
                                            Ok(x) => x,
                                            Err(_) => 0,
                                        });
                                    }
                                    prop:value=move || time_hindernis.get().minutes
                                />
                                <input type="number"
                                    autocomplete="off"
                                    placeholder="ss"
                                    min=0
                                    max=59
                                    on:input=move |ev| {
                                        time_hindernis.update(|time| time.seconds = match event_target_value(&ev).parse::<u32>() {
                                            Ok(x) => x,
                                            Err(_) => 0,
                                        });
                                    }
                                    prop:value=move || time_hindernis.get().seconds
                                />
                                <input type="number"
                                    autocomplete="off"
                                    placeholder="ms"
                                    min=0
                                    max=99
                                    on:input=move |ev| {
                                        time_hindernis.update(|time| time.milliseconds = match event_target_value(&ev).parse::<u32>() {
                                            Ok(x) => x,
                                            Err(_) => 0,
                                        });
                                    }
                                    prop:value=move || time_hindernis.get().milliseconds
                                />
                            </div>
                            <label>Tijd Popduiken</label>
                            <div class="time">
                                <input type="number"
                                    autocomplete="off"
                                    placeholder="mm"
                                    min=0
                                    max=99
                                    on:input=move |ev| {
                                        time_popduiken.update(|time| time.minutes = match event_target_value(&ev).parse::<u32>() {
                                            Ok(x) => x,
                                            Err(_) => 0,
                                        });
                                    }
                                    prop:value=move || time_popduiken.get().minutes
                                />
                                <input type="number"
                                    autocomplete="off"
                                    placeholder="ss"
                                    min=0
                                    max=59
                                    on:input=move |ev| {
                                        time_popduiken.update(|time| time.seconds = match event_target_value(&ev).parse::<u32>() {
                                            Ok(x) => x,
                                            Err(_) => 0,
                                        });
                                    }
                                    prop:value=move || time_popduiken.get().seconds
                                />
                                <input type="number"
                                    autocomplete="off"
                                    placeholder="ms"
                                    min=0
                                    max=99
                                    on:input=move |ev| {
                                        time_popduiken.update(|time| time.milliseconds = match event_target_value(&ev).parse::<u32>() {
                                            Ok(x) => x,
                                            Err(_) => 0,
                                        });
                                    }
                                    prop:value=move || time_popduiken.get().milliseconds
                                />
                            </div>
                            <input type="submit" value="Deelnemer bewerken" />
                        </form>
                    </div>
                </div>
            }.into_view(),
            None => view! {}.into_view()

        }}
    }
}