import { useRef } from 'preact/hooks'
import { useSeamlyOptions } from 'ui/hooks/seamly-hooks'
import Transcript from './transcript'

const mapper = {
  sendTranscript: Transcript,
}

const Options = () => {
  const { optionActive } = useSeamlyOptions()
  const prevRenderOption = useRef<string>()

  // We keep the previously selected option active so that we can animate the options panel.
  const RenderOption = mapper[prevRenderOption.current ?? optionActive]

  if (optionActive) {
    prevRenderOption.current = optionActive
  }
  return RenderOption ? <RenderOption /> : null
}

export default Options