/**
 * MultistepModeEditor — Split-panel editor for Multi-Step checkout mode.
 *
 * Main workspace: step manager + field editor.
 * Right sidebar: elements/design tabs.
 *
 * @package ArraySubsPro
 */
import React from "react";
import StepEditor from "./StepEditor";
import { DEFAULT_DESIGN, buildSingleStepFromSections } from "./utils";

/**
 * Build default steps populated with WooCommerce default fields.
 *
 * The builder now starts with a single configurable checkout step.
 */
export const buildDefaultSteps = (wcDefaults) => {
  const sections = wcDefaults?.sections || [];

  return [buildSingleStepFromSections(sections)];
};

const MultistepModeEditor = ({ config, onChange, wcDefaults, fieldTypes }) => {
  const design = config?.design || DEFAULT_DESIGN;
  const steps =
    config?.steps?.length > 0 ? config.steps : buildDefaultSteps(wcDefaults);

  const handleDesignChange = (newDesign) => {
    onChange({ ...config, design: newDesign, steps });
  };

  const handleStepsChange = (newSteps) => {
    onChange({ ...config, design, steps: newSteps });
  };

  return (
    <div className="arraysubs-cb-multistep-editor">
      <div className="arraysubs-cb-multistep-editor__editor">
        <StepEditor
          steps={steps}
          onStepsChange={handleStepsChange}
          design={design}
          onDesignChange={handleDesignChange}
          fieldTypes={fieldTypes}
          wcDefaults={wcDefaults}
        />
      </div>
    </div>
  );
};

export default MultistepModeEditor;