import { Driver } from 'driver.js'
import { createContext, PropsWithChildren, useContext } from 'react'

import { DRIVER_MAP, DriveStepWithId, useDriver } from './useDriver'

type DriverStepContextType = {
  driver: Driver
  setStep: (index: number, step: DriveStepWithId) => void
}

const DriverStepContext = createContext<DriverStepContextType>({ driver: null as any, setStep: () => {} })

export const DriverStepGroup = ({ children, id }: PropsWithChildren<{ id: string }>) => {
  if (!DRIVER_MAP.has(id)) {
    console.error(`Driver step group ${id} not found`)
  }
  const { driver, setStep } = useDriver({ id })
  return <DriverStepContext.Provider value={{ driver, setStep }}>{children}</DriverStepContext.Provider>
}

export const useDriverStep = () => {
  return useContext(DriverStepContext)
}