Questionnaire

use hydroxy_leptos::questionnaire::{Questionnaire, QuestionnaireAnswer, QuestionnaireQuestion as Question, Test};
use leptos::prelude::*;

pub fn demo() -> AnyView {
    let (sent, set_sent) = signal(None::<String>);

    // "Which role?" only appears for "Other", and the closing question only for happy users.
    let questions = vec![
        Question::single(
            "role",
            "What best describes your role?",
            &[("dev", "Developer"), ("design", "Designer"), ("pm", "Product manager"), ("other", "Something else")],
        )
        .required(),
        Question::text("role-other", "Tell us what you do", false)
            .show_if("role", Test::Equals("other".into()))
            .required(),
        Question::multi(
            "frameworks",
            "Which frameworks do you use hydroxy with?",
            &[("leptos", "Leptos"), ("dioxus", "Dioxus"), ("none", "Neither yet")],
        )
        .hint("Pick any that apply."),
        Question::scale("satisfaction", "How happy are you with hydroxy so far?", 1, 5, "Not happy", "Very happy")
            .required(),
        Question::text("love", "What do you like most?", true).show_if("satisfaction", Test::AtLeast(4)),
        Question::text("improve", "What should we fix first?", true)
            .show_if("satisfaction", Test::NotEquals("5".into())),
    ];

    // Built outside view! because the macro can't parse a closure type with generics.
    let on_submit = Callback::new(move |answers: Vec<QuestionnaireAnswer>| {
        let text = answers.iter().map(|a| format!("{}: {}", a.id, a.values.join(" / "))).collect::<Vec<_>>().join("; ");
        set_sent.set(Some(text));
    });

    view! {
        <div style="display: grid; gap: var(--space-6); max-width: 560px;">
            <Questionnaire
                label="Product survey"
                questions=questions
                submit_label="Send answers"
                on_submit=on_submit
            />
            {move || {
                sent.get()
                    .map(|text| {
                        view! { <p style="margin: 0; font: var(--text-sm); color: var(--text-2);">{format!("Submitted: {text}")}</p> }
                    })
            }}
        </div>
    }
    .into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::questionnaire::{Questionnaire, QuestionnaireAnswer, QuestionnaireQuestion as Question, Test};

#[component]
pub fn QuestionnaireDemo() -> Element {
    let mut sent = use_signal(|| None::<String>);

    // "Which role?" only appears for "Other", and the closing question only for happy users.
    let questions = vec![
        Question::single(
            "role",
            "What best describes your role?",
            &[("dev", "Developer"), ("design", "Designer"), ("pm", "Product manager"), ("other", "Something else")],
        )
        .required(),
        Question::text("role-other", "Tell us what you do", false)
            .show_if("role", Test::Equals("other".into()))
            .required(),
        Question::multi(
            "frameworks",
            "Which frameworks do you use hydroxy with?",
            &[("leptos", "Leptos"), ("dioxus", "Dioxus"), ("none", "Neither yet")],
        )
        .hint("Pick any that apply."),
        Question::scale("satisfaction", "How happy are you with hydroxy so far?", 1, 5, "Not happy", "Very happy")
            .required(),
        Question::text("love", "What do you like most?", true).show_if("satisfaction", Test::AtLeast(4)),
        Question::text("improve", "What should we fix first?", true)
            .show_if("satisfaction", Test::NotEquals("5".into())),
    ];

    rsx! {
        div { style: "display: grid; gap: var(--space-6); max-width: 560px;",
            Questionnaire {
                label: "Product survey",
                questions,
                submit_label: "Send answers",
                on_submit: move |answers: Vec<QuestionnaireAnswer>| {
                    let text = answers.iter().map(|a| format!("{}: {}", a.id, a.values.join(" / "))).collect::<Vec<_>>().join("; ");
                    sent.set(Some(text));
                },
            }
            if let Some(text) = sent() {
                p { style: "margin: 0; font: var(--text-sm); color: var(--text-2);", "Submitted: {text}" }
            }
        }
    }
}