import { type FC } from 'react';

import HorizontalStepperHU, {
  type HorizontalStepperProps as HorizontalStepperPropsHU,
  type StepType,
} from '@material-hu/components/deprecated/HorizontalStepper';

import { useLokaliseTranslation } from 'src/utils/i18n';

export type HorizontalStepperProps = HorizontalStepperPropsHU;

export const HorizontalStepper: FC<HorizontalStepperProps> = props => {
  const {
    activeStep,
    steps,
    backButton,
    nextButton,
    finishButton,
    ...stepperProps
  } = props;

  const { t } = useLokaliseTranslation('backoffice_only');

  const getBackLabel = (step: StepType) =>
    t('backoffice_only:horizontal_stepper.back_to', { to: step.label });
  const getNextLabel = (step: StepType) =>
    t('backoffice_only:horizontal_stepper.continue_to', { to: step.label });

  const formatedBackButton = {
    ...backButton,
    getLabel: getBackLabel,
  };

  const formatedNextButton = {
    ...nextButton,
    getLabel: getNextLabel,
  };

  const formatedFinishButton = {
    ...finishButton,
    label: t('backoffice_only:horizontal_stepper.publish'),
  };

  return (
    <HorizontalStepperHU
      activeStep={activeStep}
      steps={steps}
      stateLabels={{
        active: t('backoffice_only:horizontal_stepper.active'),
        completed: t('backoffice_only:horizontal_stepper.completed'),
        pending: t('backoffice_only:horizontal_stepper.pending'),
      }}
      backButton={backButton ? formatedBackButton : undefined}
      nextButton={nextButton ? formatedNextButton : undefined}
      finishButton={finishButton ? formatedFinishButton : undefined}
      {...stepperProps}
    />
  );
};

export default HorizontalStepper;
