import React, { Fragment } from 'react';
import classNames from 'classnames';

import { Icon } from '../Icon/Icon';
import { Paragraph } from '../Typography/Paragraph/Paragraph';
import { Text } from '../Typography/Text/Text';

export interface StepperProps {
  steps: [string, string, ...string[]];
  /**
   * Starts with 1
   */
  activeStep: number;
  /**
   * Prefix for label.
   * Visible on viewport up to 992px of screen width.
   * Example: `Step 1`
   */
  prefixOnSmallScreens?: string;
}

export const Stepper: React.FC<StepperProps> = ({ steps, activeStep = 1, prefixOnSmallScreens, ...rest }) => {
  return (
    <div {...rest} className='stepper'>
      <div className='stepper__steps'>
        {steps.map((item, index) => {
          const currentStep = index + 1;
          /* Ensures activeStep is within a specified range. */
          const currentActiveStep = Math.max(1, Math.min(steps.length, activeStep));
          const isStepCurrent = currentActiveStep === currentStep;
          const isStepCompleted = currentActiveStep > currentStep;

          return (
            <Fragment key={index}>
              {index > 0 && <div role='separator' className='stepper__separator' />}
              <div
                className={classNames(
                  'stepper__item',
                  { 'stepper__item--active': isStepCurrent },
                  { 'stepper__item--completed': isStepCompleted }
                )}
              >
                <div className='stepper__icon'>
                  <Icon icon='shp-checkmark' />
                </div>
                <div className='stepper__label' aria-current={isStepCurrent ? 'step' : undefined}>
                  <Paragraph>{item}</Paragraph>
                </div>
              </div>
            </Fragment>
          );
        })}
      </div>
      <div className='stepper__summary' aria-current='step'>
        {prefixOnSmallScreens && (
          <div className='stepper__labelPrefix'>
            <Text>{prefixOnSmallScreens}</Text>
          </div>
        )}
        <div className='stepper__label'>
          <Paragraph>{steps[activeStep - 1]}</Paragraph>
        </div>
      </div>
    </div>
  );
};