import React, { memo } from "react";
import { DynamicLayout } from "../DynamicLayout";
import { Button } from "../Button";
import { Stepper } from "../Stepper";
import createFlowImage from "../../assets/createFlowImage.svg";
import "./CreateItemFlow.styles.scss";

// components extract outside of function scope to prevent redefining
const LeftPanelContent = ({
  leftPanelTitle,
  leftPanelDescription,
  leftPanelImage,
}) => (
  <div className="left-panel-content">
    <div className="left-panel-title">
      <h1>{leftPanelTitle}</h1>
      <p>{leftPanelDescription}</p>
    </div>
    {leftPanelImage ? (
      leftPanelImage
    ) : (
      <img
        className="left-panel-image"
        src={createFlowImage}
        alt="Create Item Flow"
      />
    )}
  </div>
);

const RightContentPanel = ({
  showStepper,
  steps,
  step,
  stepperVariant,
  onStepClick,
  headings,
  children,
  contentRef,
  hasScroll,
  actionsChildren,
  onCancel,
  onPrev,
  onNext,
  totalSteps,
}) => (
  <>
    {showStepper && (
      <Stepper
        steps={steps}
        activeStep={step - 1}
        handleStep={(index) => onStepClick && onStepClick(index + 1)}
        orientation="horizontal"
        variant={stepperVariant}
      />
    )}
    <div
      ref={contentRef}
      className={`content-wrapper ${!hasScroll ? "no-scroll" : ""}`}
    >
      {headings.map((heading, index) => (
        <div key={index} className="heading">
          <h2>{heading}</h2>
          {React.Children.toArray(children)[index]}
        </div>
      ))}
    </div>

    {actionsChildren ? (
      <div className="actions">{actionsChildren}</div>
    ) : (
      <div className="actions">
        {step === 1 ? (
          <Button variant="secondary" onClick={onCancel}>
            Cancel
          </Button>
        ) : (
          <Button variant="secondary" onClick={onPrev}>
            Previous
          </Button>
        )}
        <Button variant="primary" onClick={onNext}>
          {step === totalSteps ? "Submit" : "Next"}
        </Button>
      </div>
    )}
  </>
);

export const CreateItemFlow = memo(
  ({
    step = 1,
    totalSteps = 3,
    leftPanelWidth,
    headings = [],
    children,
    onCancel,
    onNext,
    onPrev,
    onStepClick,
    stepperVariant = "progress",
    leftPanelTitle = "Create item",
    leftPanelDescription = "",
    leftPanelImage = null,
    actionsChildren = null,
    showStepper = true,
  }) => {
    const steps = React.useMemo(() => {
      return Array.from({ length: totalSteps }, (_, idx) => ({
        label: `Step ${idx + 1}`,
        description: `Step ${idx + 1} of ${totalSteps}`,
      }));
    }, [totalSteps]);

    return (
      <DynamicLayout
        leftPanel={
          <LeftPanelContent
            leftPanelTitle={leftPanelTitle}
            leftPanelDescription={leftPanelDescription}
            leftPanelImage={leftPanelImage}
          />
        }
        rightContent={
          <RightContentPanel
            showStepper={showStepper}
            steps={steps}
            step={step}
            stepperVariant={stepperVariant}
            onStepClick={onStepClick}
            headings={headings}
            children={children}
            actionsChildren={actionsChildren}
            onCancel={onCancel}
            onPrev={onPrev}
            onNext={onNext}
            totalSteps={totalSteps}
          />
        }
        leftPanelWidth={leftPanelWidth}
        showStepper={showStepper}
      />
    );
  }
);
