import React from 'react'

import Button from '../Button/Button'
import Icon from '../Icons/Icon'
import styles from './_stepper.module.scss'
import { c } from '../../translations/LibraryTranslationService'

/** Base properties for the Stepper component */
type StepperPropsBase = {
  /** Array of strings which represent each step title */
  steps: string[]
  /** Indicates current step number. Starts from 1 */
  currentStep: number
  /** Optionally hide the "Step" text */
  hideStepText?: boolean
  /** Optionally hide the Back button */
  hideBackButton?: boolean
  /** Optional prop to add a test id to the Stepper for QA testing */
  qaTestId?: string
}

/**
 * If `hideBackButton` is `true`, `callout` should not be provided.
 * If `hideBackButton` is `false` or not provided, `callout` is required.
 */
export type StepperProps = StepperPropsBase &
  (
    | {
        hideBackButton: true
        /** Callout for the back button. Required if the back button is not hidden. */
        callout?: never
      }
    | {
        hideBackButton?: false
        /** Callout for the back button. Required if the back button is not hidden. */
        callout: (currentStep: number) => void
      }
  )

const Stepper = ({
  steps,
  currentStep,
  callout,
  hideStepText,
  hideBackButton,
  qaTestId = 'stepper',
}: StepperProps): React.JSX.Element => {
  const cStep =
    currentStep <= 0
      ? 1
      : currentStep > steps.length
        ? steps.length
        : currentStep
  const hasBackButton = !hideBackButton && currentStep > 1
  const backButtonStyle = hasBackButton ? styles.hasBackButton : ''

  return (
    <div className={styles.container} qa-test-id={qaTestId}>
      <div className={`${styles.topRowGrid} ${backButtonStyle}`}>
        {hasBackButton && cStep > 1 && (
          <Button
            as='unstyled'
            onClick={() => callout?.(currentStep)}
            className='flex items-center justify-center'
          >
            <Icon
              icon='arrowLong'
              className={styles.iconStyles}
              color='dark-purple'
            />
          </Button>
        )}
        <div className={`${styles.header} ${backButtonStyle}`}>
          <div className={styles.title}>{steps[cStep - 1]}</div>
          <div className={styles.stepText}>
            {!hideStepText ? c('step') : null}{' '}
            {c('stepOfSteps', {
              stepNumber: cStep,
              stepLength: steps.length,
            })}{' '}
          </div>
        </div>
      </div>
      <div
        className={styles.stepper}
        style={{ gridTemplateColumns: `repeat(${steps.length}, 1fr)` }}
      >
        {steps.map((step, index) => (
          <Step
            key={`${step}${index}`}
            active={cStep === index + 1}
            highlighted={cStep > index + 1}
          />
        ))}
      </div>
    </div>
  )
}

export default Stepper

type StepProps = {
  active: boolean
  highlighted: boolean
}

const Step = ({ active, highlighted }: StepProps): React.JSX.Element => {
  return (
    <div className={styles.step}>
      <div
        className={`${styles.activePlaceholder} ${
          active ? styles.active : ''
        } ${highlighted ? styles.highlighted : ''}`.trim()}
      />
    </div>
  )
}