StepFormDialog

"use client";

import { useState } from "react";
import { Button } from "@/components/Button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

const STEPS = [
  { title: "顧客情報を入力", body: "..." },
  { title: "問い合わせ内容を選択", body: "..." },
  { title: "内容の確認", body: "..." },
];

export function Example() {
  const [step, setStep] = useState(0);
  const total = STEPS.length;
  const isFirst = step === 0;
  const isLast = step === total - 1;
  const current = STEPS[step];

  return (
    <Dialog onOpenChange={(next) => { if (!next) setStep(0); }}>
      <DialogTrigger asChild>
        <Button variant="primary" size="m">新規登録</Button>
      </DialogTrigger>
      <DialogContent
        showCloseButton={false}
        className="!w-[var(--width-dialog-s)] !max-w-none !gap-0 !p-0 !ring-0 shadow-layer-4 overflow-hidden"
      >
        <div className="p-[var(--spacing-xs)] border-b border-[var(--border-default)] bg-[var(--bg-surface)]">
          <DialogTitle className="!text-[length:var(--font-size-l)] !font-medium !leading-[1.25]">
            {`ステップ ${step + 1} / ${total} : ${current.title}`}
          </DialogTitle>
        </div>
        <div className="p-[var(--spacing-xs)] bg-[var(--bg-surface)] text-[color:var(--text-primary)] tds-text-body-m">
          {current.body}
        </div>
        <div className="p-[var(--spacing-xs)] border-t border-[var(--border-default)] bg-[var(--bg-surface)] flex items-center justify-between">
          <Button
            variant="secondary"
            size="s"
            disabled={isFirst}
            onClick={() => setStep((s) => Math.max(0, s - 1))}
          >
            戻る
          </Button>
          <div className="flex items-center gap-[var(--spacing-xxs)]">
            <DialogClose asChild>
              <Button variant="secondary" size="s">キャンセル</Button>
            </DialogClose>
            {isLast ? (
              <DialogClose asChild>
                <Button variant="primary" size="s">登録</Button>
              </DialogClose>
            ) : (
              <Button
                variant="primary"
                size="s"
                onClick={() => setStep((s) => Math.min(total - 1, s + 1))}
              >
                次へ
              </Button>
            )}
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}