import React from 'react'

import Button from '../Button/Button'
import Stepper from '../Stepper/Stepper'
import styles from './_guided-tour.module.scss'
import { c } from '../../translations/LibraryTranslationService'

export type GuidedTourStepProps = {
  /** Current step of the Guided Tour parent component. */
  currentStep: number
  /** Total number of steps for the Guided Tour. */
  totalSteps: number
  /** We want to display the same text in the step header for all steps. We are using `stepHeaderText` to show a different header in the content. */
  stepHeaderText: string
  /** Header content for the Guided Tour Step. */
  headerText: string
  /** Content for the Guided Tour Step. */
  text: React.ReactNode
  /** Callout to navigate between steps. */
  navigate: (stepNumber: number) => void
  /** Function to call when the Got It button is clicked. This will close the Guided Tour */
  close: () => void
  /** To trigger an action on clicking the Next button */
  nextButtonCallout?: (currentStep: number) => void
  /** Optional prop to add a test id to the GuidedTourStep for QA testing */
  qaTestId?: string
}

const GuidedTourStep = ({
  currentStep,
  totalSteps,
  stepHeaderText,
  headerText,
  text,
  navigate,
  close,
  nextButtonCallout,
  qaTestId,
}: GuidedTourStepProps): React.JSX.Element => {
  const steps = Array.from(Array(totalSteps)).map(() => stepHeaderText)

  return (
    <div qa-test-id={qaTestId}>
      <Stepper
        currentStep={currentStep}
        callout={navigate}
        steps={steps}
        hideStepText
      />
      <div className={styles.body}>
        <div className={styles.contentHeader}>{headerText}</div>
        <div className={styles.contentBody}>{text}</div>
      </div>
      <div className={styles.buttons}>
        {currentStep < steps.length ? (
          <Button
            styleType={'primary-blue'}
            onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
              nextButtonCallout && nextButtonCallout(currentStep)
              navigate(currentStep + 1)
              e.currentTarget.blur()
            }}
          >
            {c('next')}
          </Button>
        ) : (
          <Button styleType={'primary-blue'} onClick={close}>
            {c('gotIt')}
          </Button>
        )}
      </div>
    </div>
  )
}

export default GuidedTourStep