use heck::ToTitleCase;

use phosphor_leptos::Horse;

#[component]
fn SubtypePlayer() -> impl IntoView {
    use self::card::Subtype;
    let (subtype_str, set_subtype_str) = create_signal("".to_string());
    let subtype = move || Subtype::new(subtype_str.get());
    let (quasi_member, set_quasi_member) = create_signal(String::new());
    view! {
        <div class="w-1/2">
            <label class="input input-bordered flex items-center gap-2">
                <Horse size="24px"/>
                <input
                    type="text"
                    class="grow"
                    placeholder="Subtype"
                    prop:value=move || subtype_str.get()
                    on:input=move |ev| set_subtype_str.set(event_target_value(&ev))
                />
            </label>
            <ul class="list-disc list-inside">
                {move || {
                    subtype()
                        .subtypes()
                        .map(|st| view! { <li>{st.to_title_case()}</li> })
                        .collect_view()
                }}
            </ul>
            <div class="join w-full flex">
                <label
                    class="input input-bordered flex items-center gap-2 join-item grow"
                    class=(
                        "input-error",
                        move || {
                            let qm = quasi_member.get();
                            !qm.is_empty() && !subtype().is_quasimember(qm)
                        },
                    )
                >
                    <input
                        type="text"
                        class="grow"
                        placeholder="Quasimember?"
                        prop:value=move || quasi_member.get()
                        on:input=move |ev| set_quasi_member.set(event_target_value(&ev))
                    />
                </label>
                <button
                    class="btn join-item"
                    on:click=move |_| set_quasi_member.update(|qm| qm.clear())
                >
                    "Clear"
                </button>
            </div>
        </div>
    }
}

                <SubtypePlayer/>