import { useState } from 'react'
import { SetUpProgress } from './useSetUpProgress'

export type SetUpFocus = 'loading' | 'failed' | 'setUp' | 'dailyUse'

const focusOf = (progress: SetUpProgress): SetUpFocus => {
  switch (progress) {
    case 'loading':
    case 'failed':
      return progress
    case 'notConnected':
      return 'setUp'
    case 'complete':
      return 'dailyUse'
  }
}

/**
 * Decides what the landing page focuses on from the set-up progress the
 * merchant arrived with, so connecting the plugin keeps the remaining set-up
 * steps in view for the rest of the visit.
 */
const useSetUpFocus = (progress: SetUpProgress): SetUpFocus => {
  const [progressOnArrival, setProgressOnArrival] =
    useState<SetUpProgress>(progress)

  if (progressOnArrival === 'loading' && progress !== 'loading') {
    setProgressOnArrival(progress)
  }

  return focusOf(
    progressOnArrival === 'loading' || progress === 'failed'
      ? progress
      : progressOnArrival
  )
}

export default useSetUpFocus