import { useConfig } from 'domains/config/hooks'
import { selectHasError } from 'domains/interrupt/selectors'
import { useVisibility } from 'domains/visibility/hooks'
import { useSelector } from 'react-redux'
import { CollapsedChatMessages } from './collapsed-chat-messages'

export default function PreChatMessages() {
  const { preChatEvents } = useConfig()
  const hasError = useSelector(selectHasError)
  const { isOpen } = useVisibility()

  const isVisible = !(hasError || !preChatEvents?.length || isOpen)

  return isVisible ? <CollapsedChatMessages events={preChatEvents} /> : null
}