import type { ReactNode } from "react";
import type { WizardStep } from "../types";
import Dialog, { type DialogProps } from "./Dialog";
import Stepper from "./Stepper";

export type GuidedConfigDialogProps = Omit<DialogProps, "children"> & {
  steps: WizardStep[];
  activeStep: string;
  onStepChange: (stepId: string) => void;
  intro?: ReactNode;
  children: ReactNode;
};

function joinClasses(...classes: Array<string | undefined | false>) {
  return classes.filter(Boolean).join(" ");
}

export default function GuidedConfigDialog({
  steps,
  activeStep,
  onStepChange,
  intro,
  children,
  className = "",
  bodyClassName = "",
  ...dialogProps
}: GuidedConfigDialogProps) {
  const active = steps.find((step) => step.id === activeStep) ?? steps[0];

  return (
    <Dialog
      {...dialogProps}
      className={joinClasses("guided-config-dialog", className)}
      bodyClassName={joinClasses("guided-config-dialog-body", bodyClassName)}
    >
      <div className="guided-config-shell">
        <aside className="guided-config-sidebar" aria-label="Setup steps">
          <Stepper steps={steps} activeStep={active?.id ?? activeStep} onSelect={onStepChange} />
        </aside>
        <section className="guided-config-content">
          {intro && <div className="guided-config-intro">{intro}</div>}
          {active && (
            <header className="guided-config-step-heading">
              <h3>{active.label}</h3>
              {active.description && <p>{active.description}</p>}
            </header>
          )}
          <div className="guided-config-step-body">{children}</div>
        </section>
      </div>
    </Dialog>
  );
}