import { useContext } from 'preact/hooks'
import ComponentContext from 'ui/components/conversation/component-context'
import { payloadTypes } from 'ui/utils/seamly-utils'

const useComponentContext = () => {
  const components = useContext(ComponentContext)

  if (!components) {
    throw new Error(
      'useComponentContext has to be used within <ComponentContext.Provider>',
    )
  }

  return components
}

const useEventComponentMapping = (event) => {
  const components = useComponentContext()
  const componentType = components[event.type]
  let Component = componentType[event.payload.type]
  let SubComponent = null

  if (event.payload.type === payloadTypes.choicePrompt) {
    SubComponent = componentType[event.payload.body.prompt.type]
  }

  if (event.type === 'participant') {
    Component = componentType[event.type]
  }

  if (Component && typeof Component !== 'function') {
    Component = Component[event.payload.body.type]
  }

  return [Component || components?.fallback, SubComponent]
}

export default useEventComponentMapping