Questionnaire

"use client";

import * as React from "react";
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoiceDescription,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSkip,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from "@/components/ui/questionnaire";

const items = [
  {
    name: "direction",
    required: true,
    prompt: "O que prototipar a seguir?",
    description: "Escolha uma direção.",
    choices: [
      {
        value: "delegation",
        label: "Delegação",
        description: "Como o trabalho vai para um especialista.",
      },
      {
        value: "questions",
        label: "Perguntas",
        description: "Escolhas enquanto a interface espera.",
      },
      { value: "both", label: "Os dois juntos" },
    ],
  },
  {
    name: "detail",
    required: false,
    prompt: "Quanto detalhe incluir?",
    description: "Pode pular se ainda não souber.",
    choices: [
      { value: "focused", label: "Focado" },
      { value: "complete", label: "Fluxo completo" },
    ],
  },
] as const;

export function Demo() {
  const [submitted, setSubmitted] = React.useState<string | null>(null);

  return (
    <div className="w-full max-w-md">
      <Questionnaire
        items={[...items]}
        onSubmit={(event) => {
          event.preventDefault();
          const data = new FormData(event.currentTarget);
          setSubmitted(
            JSON.stringify({
              direction: data.get("direction"),
              detail: data.get("detail"),
            })
          );
        }}
      >
        <QuestionnaireProgress />
        {items.map((question) => (
          <QuestionnaireItem
            key={question.name}
            name={question.name}
            required={question.required}
          >
            <QuestionnaireTitle>{question.prompt}</QuestionnaireTitle>
            <QuestionnaireDescription>
              {question.description}
            </QuestionnaireDescription>
            <QuestionnaireChoices>
              {question.choices.map((choice) => (
                <QuestionnaireChoice key={choice.value} value={choice.value}>
                  <span className="font-medium">{choice.label}</span>
                  {"description" in choice && choice.description ? (
                    <QuestionnaireChoiceDescription>
                      {choice.description}
                    </QuestionnaireChoiceDescription>
                  ) : null}
                </QuestionnaireChoice>
              ))}
            </QuestionnaireChoices>
            <QuestionnaireError />
          </QuestionnaireItem>
        ))}
        <QuestionnaireActions>
          <QuestionnairePrevious />
          <QuestionnaireSkip />
          <QuestionnaireNext />
          <QuestionnaireSubmit />
        </QuestionnaireActions>
      </Questionnaire>
      {submitted ? (
        <p className="fe-caption mt-fe-3 text-success">
          Enviado: <span className="font-mono">{submitted}</span>
        </p>
      ) : null}
    </div>
  );
}