import { Driver, DriveStep } from 'driver.js'
import { cloneElement, useEffect, useRef } from 'react'
import { createRoot, Root } from 'react-dom/client'

import { useDriverStep } from './DriverStepGroup'
import { DriveStepWithId } from './useDriver'

export interface DriverStepProps {
  stepIndex: number
  option: DriveStepWithComponent | ((driver: Driver) => DriveStepWithComponent)

  children: React.ReactElement
}

export type DriveStepWithComponent = Omit<DriveStepWithId, 'element'> & {
  popover: DriveStep['popover'] & {
    component?: React.ReactElement
  }
}

export const DriverStep = ({ children, stepIndex, option }: DriverStepProps) => {
  const childRef = useRef<HTMLElement>(null)
  const { setStep, driver } = useDriverStep()

  useEffect(() => {
    let root: Root | null = null
    const { popover: popoverOption, ...rest } = typeof option === 'function' ? option(driver) : option
    setStep(stepIndex, {
      ...rest,
      element: childRef.current!,
      popover: {
        ...popoverOption,
        ...(popoverOption.component
          ? {
              onPopoverRender: (popover) => {
                popover.wrapper.innerHTML = ''
                root = createRoot(popover.wrapper)
                root.render(popoverOption.component)
              }
            }
          : {})
      }
    })

    return () => root?.unmount()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return cloneElement(children, { ref: childRef })
}