import React from "react";
import Typography from "@mui/material/Typography";
import MUIStepper from "@mui/material/Stepper";
import Step from "@mui/material/Step";
import StepLabel from "@mui/material/StepLabel";
import PropTypes from "prop-types";
import { Badge } from "../Badge";

import "./Stepper.styles.scss";

const renderDefaultStepper = ({
  steps,
  activeStep,
  orientation,
  handleStep,
  width = "100%",
  ...args
}) => {
  // const {icon, label, color="warning"} = statusConfig;
  return (
    <MUIStepper
      className="ia-styles ia-stepper ia-stepper-horizontal"
      activeStep={activeStep}
      sx={{ width: width }}
      orientation={orientation}
      {...args}
    >
      {steps.length > 0 &&
        steps.map((step, index) => (
          <Step
          key={step.label}
          onClick={() => handleStep(index)}
          tabIndex={handleStep ? 0 : -1}
          onKeyDown={(e) => {
            if (e.key === "Enter" || e.key === " ") {
              e.preventDefault();
              handleStep(index);
            }
          }}
        >
            <StepLabel
              optional={
                step.description ? (
                  <Typography variant="caption">{step.description}</Typography>
                ) : null
              }
              className={step?.statusConfig ? "status-config" : ""}
            >
              {step.label}
              {step?.statusConfig && <Badge label={step.statusConfig.label} color={step.statusConfig.color} icon={step.statusConfig.icon} isIcon={step.statusConfig.icon} variant="subtle"/>}
            </StepLabel>
        </Step>
      ))}
    </MUIStepper>
  );
};

const renderProgressStepper = ({ steps, activeStep, handleStep }) => (
  <div className="ia-styles ia-stepper progress">
    <div className="progress-steps">
      {steps.map((step, index) => (
        <div
          key={step.label}
          className={`step ${index === activeStep ? "active" : ""} ${index < activeStep ? "completed" : ""
            }`}
          onClick={() => handleStep(index)}
          tabIndex={handleStep ? 0 : -1}
          onKeyDown={(e) => {
            if (e.key === "Enter" || e.key === " ") {
              e.preventDefault();
              handleStep(index);
            }
          }}
        />
      ))}
    </div>
  </div>
);

export const Stepper = ({
  steps,
  activeStep,
  orientation = "horizontal",
  handleStep,
  variant = "default",
  ...args
}) => {
  const stepperContent = {
    default: () =>
      renderDefaultStepper({
        steps,
        activeStep,
        orientation,
        handleStep,
        ...args,
      }),
    progress: () => renderProgressStepper({ steps, activeStep, handleStep }),
    // Backward compatibility
    mui: () =>
      renderDefaultStepper({
        steps,
        activeStep,
        orientation,
        handleStep,
        ...args,
      }),
  };

  return stepperContent[variant]();
};

Stepper.propTypes = {
  steps: PropTypes.array,
  activeStep: PropTypes.number,
  orientation: PropTypes.oneOf(["horizontal", "vertical"]),
  handleStep: PropTypes.func,
  variant: PropTypes.oneOf(["default", "progress", "mui"]),
};
