import { useCallback, useEffect, useState } from 'react'
import apiFetch from '@wordpress/api-fetch'

export type SetUpProgress = 'loading' | 'failed' | 'notConnected' | 'complete'

interface Permissions {
  canConfigure: boolean
  canUpdatePlugins: boolean
}

interface SetUpStatus extends Permissions {
  connected: boolean
}

/**
 * Follows how far the merchant has come with setting up the plugin, starting
 * from the status the shop reports and moving on once the plugin is connected
 * on this page.
 */
const useSetUpProgress = (): Permissions & {
  progress: SetUpProgress
  markConnected: () => void
} => {
  const [progress, setProgress] = useState<SetUpProgress>('loading')
  const [permissions, setPermissions] = useState<Permissions>({
    canConfigure: false,
    canUpdatePlugins: false,
  })

  useEffect(() => {
    apiFetch<SetUpStatus>({ path: '/posten-bring-checkout/overview/set-up' })
      .then(({ connected, canConfigure, canUpdatePlugins }) => {
        setPermissions({ canConfigure, canUpdatePlugins })
        setProgress(connected ? 'complete' : 'notConnected')
      })
      .catch(() => setProgress('failed'))
  }, [])

  const markConnected = useCallback(() => setProgress('complete'), [])

  return { progress, ...permissions, markConnected }
}

export default useSetUpProgress