//! Hypergeometric Distribution Calculator
use leptos::html::ElementChild;
use leptos::prelude::{signal, Get, GlobalAttributes, OnTargetAttribute, PropAttribute, Set};
use leptos::{component, view, IntoView};

use crate::calc::hyper_geometric;

/// A parameterized incrementing button
#[component]
pub fn Calculator() -> impl IntoView {
    let (population, set_population) = signal(0u8);
    let (successes, set_successes) = signal(0u8);
    let (sample, set_sample) = signal(0u8);
    let (sample_successes, set_sample_successes) = signal(0u8);
    let result = move || {
        hyper_geometric(
            population.get(),
            successes.get(),
            sample.get(),
            sample_successes.get(),
        )
        .unwrap_or_default()
    };
    view! {
        <form>
            <p>
                <label for="population">Population Size</label>
                <input
                    id="population"
                    type="number"
                    min=0
                    prop:value=population
                    on:input:target=move |ev| {
                        set_population.set(ev.target().value().parse().unwrap_or_default())
                    }
                />
            </p>
            <p>
                <label for="successes">Successes in Population</label>
                <input
                    id="successes"
                    type="number"
                    min=0
                    prop:max=population
                    prop:value=successes
                    on:input:target=move |ev| {
                        set_successes.set(ev.target().value().parse().unwrap_or_default())
                    }
                />
            </p>
            <p>
                <label for="sample">Sample Size</label>
                <input
                    id="sample"
                    type="number"
                    min=0
                    prop:max=population
                    prop:value=sample
                    on:input:target=move |ev| {
                        set_sample.set(ev.target().value().parse().unwrap_or_default())
                    }
                />
            </p>
            <p>
                <label for="sample_successes">Successes in Sample</label>
                <input
                    id="sample_successes"
                    type="number"
                    min=0
                    prop:max=sample
                    prop:value=sample_successes
                    on:input:target=move |ev| {
                        set_sample_successes.set(ev.target().value().parse().unwrap_or_default())
                    }
                />
            </p>
            <p>
                <span>"P(X = "</span>
                <span>{sample_successes}</span>
                <span>"): "</span>
                <span>{move|| result().exactly}</span>
            </p>
            <p>
                <span>"P(X < "</span>
                <span>{sample_successes}</span>
                <span>"): "</span>
                <span>{move|| result().less_than}</span>
            </p>
            <p>
                <span>"P(X ≤ "</span>
                <span>{sample_successes}</span>
                <span>"): "</span>
                <span>{move|| result().less_or_equal}</span>
            </p>
            <p>
                <span>"P(X > "</span>
                <span>{sample_successes}</span>
                <span>"): "</span>
                <span>{move|| result().greater_than}</span>
            </p>
            <p>
                <span>"P(X ≥ "</span>
                <span>{sample_successes}</span>
                <span>"): "</span>
                <span>{move|| result().greater_or_equal}</span>
            </p>
        </form>
    }
}