Checkbox

use hydroxy_leptos::checkbox::*;
use leptos::prelude::*;

pub fn demo() -> AnyView {
    let (interviews, set_interviews) = signal(true);
    let (tickets, set_tickets) = signal(false);
    // The parent is indeterminate while its children disagree.
    let all = move || match (interviews.get(), tickets.get()) {
        (true, true) => CheckedState::Checked,
        (false, false) => CheckedState::Unchecked,
        _ => CheckedState::Indeterminate,
    };
    let set_all = move |on| {
        set_interviews.set(on);
        set_tickets.set(on);
    };

    view! {
        <div style="display: grid; gap: var(--space-4);">
            <Checkbox checked=Signal::derive(move || Some(all())) on_checked_change=set_all>
                "All sources"
            </Checkbox>
            <div style="display: grid; gap: var(--space-4); padding-left: var(--space-8);">
                <Checkbox
                    checked=Signal::derive(move || Some(interviews.get().into()))
                    on_checked_change=move |on| set_interviews.set(on)
                    name="sources"
                    value="interviews"
                >
                    "interviews-q3.pdf"
                </Checkbox>
                <Checkbox
                    checked=Signal::derive(move || Some(tickets.get().into()))
                    on_checked_change=move |on| set_tickets.set(on)
                    name="sources"
                    value="tickets"
                >
                    "tickets-sept.csv"
                </Checkbox>
            </div>
        </div>

        <div style="display: grid; gap: var(--space-4);">
            <Checkbox default_checked=CheckedState::Checked>"Email me when the summary is ready"</Checkbox>
            <Checkbox disabled=true>"Share with the workspace"</Checkbox>
        </div>
    }
    .into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::checkbox::{Checkbox, CheckedState};

#[component]
pub fn CheckboxDemo() -> Element {
    let mut interviews = use_signal(|| true);
    let mut tickets = use_signal(|| false);
    // The parent is indeterminate while its children disagree.
    let all = match (interviews(), tickets()) {
        (true, true) => CheckedState::Checked,
        (false, false) => CheckedState::Unchecked,
        _ => CheckedState::Indeterminate,
    };

    rsx! {
        div { style: "display: grid; gap: var(--space-4);",
            Checkbox {
                checked: Some(all),
                on_checked_change: move |on| {
                    interviews.set(on);
                    tickets.set(on);
                },
                "All sources"
            }
            div { style: "display: grid; gap: var(--space-4); padding-left: var(--space-8);",
                Checkbox {
                    checked: Some(interviews().into()),
                    on_checked_change: move |on| interviews.set(on),
                    name: "sources",
                    value: "interviews",
                    "interviews-q3.pdf"
                }
                Checkbox {
                    checked: Some(tickets().into()),
                    on_checked_change: move |on| tickets.set(on),
                    name: "sources",
                    value: "tickets",
                    "tickets-sept.csv"
                }
            }
            Checkbox { default_checked: CheckedState::Checked, "Email me when the summary is ready" }
            Checkbox { disabled: true, "Share with the workspace" }
        }
    }
}