import { Stepper, Box } from '@wix/design-system';
import { ImportState, ImportStep } from '@wix/bex-core';
import React from 'react';
import { observer } from 'mobx-react-lite';

// The stepper is only rendered on the upload/configuration steps (see
// ImportButtonModalLayout); progress and summary map past the last visible step
// so both rendered steps read as completed if the stepper is ever shown.
const STEPPER_INDEX: Record<ImportStep, number> = {
  upload: 0,
  configuration: 1,
  progress: 2,
  summary: 2,
};

function getStepperSteps(currentStep: ImportStep, t: ImportState['translate']) {
  const activeIndex = STEPPER_INDEX[currentStep];

  return [
    { text: t('cairo.import.stepper.upload') },
    { text: t('cairo.import.stepper.matchFields') },
  ].map((step, index) => ({
    ...step,
    type: (
      index < activeIndex
        ? 'completed'
        : index > activeIndex
          ? 'disabled'
          : 'normal'
    ) as 'completed' | 'disabled' | 'normal',
  }));
}

export interface ImportStepperProps {
  state: ImportState;
  removeContentPadding?: boolean;
}

function _ImportStepper({ state, removeContentPadding }: ImportStepperProps) {
  const activeStep = STEPPER_INDEX[state.currentStep];
  const steps = getStepperSteps(state.currentStep, state.translate);

  const contentPadding = removeContentPadding ? undefined : 'SP4';

  const handleStepClick = (stepIndex: number) => {
    if (stepIndex < activeStep) {
      state.discardAndGoBack();
    }
  };

  return (
    <Box paddingLeft={contentPadding} paddingRight={contentPadding}>
      <Stepper
        activeStep={activeStep}
        steps={steps}
        onClick={handleStepClick}
      />
    </Box>
  );
}

export const ImportStepper = observer(_ImportStepper);