import { selectHasError } from 'domains/interrupt/selectors'
import TranslationStatus from 'domains/translations/components/translation-status'
import { useVisibility } from 'domains/visibility/hooks'
import { className } from 'lib/css'
import { useSelector } from 'react-redux'
import AppOptions from 'ui/components/app-options'
import ChatScrollProvider from 'ui/components/conversation/event/chat-scroll/chat-scroll-provider'
import EntryContainer from 'ui/components/entry/entry-container'
import CollapseButton from 'ui/components/view/window-view/collapse-button'
import Interrupt from './interrupt'

function ChatFrame({ children }) {
  const hasError = useSelector(selectHasError)
  const { isOpen } = useVisibility()

  if (hasError) {
    return <Interrupt />
  }

  return (
    <>
      <ChatScrollProvider>
        <div className={className('chat__container__header')}>
          <TranslationStatus />
          <CollapseButton />
        </div>
        {children}
      </ChatScrollProvider>
      <EntryContainer />
      {isOpen && <AppOptions />}
    </>
  )
}

export default ChatFrame