import { useShowInlineView, useVisibility } from 'domains/visibility/hooks'
import { className } from 'lib/css'
import Conversation from '../conversation/conversation'
import Chat from '../layout/chat'
import ChatFrame from '../layout/chat-frame'
import PreChatMessages from '../layout/pre-chat-messages'
import Suggestions from '../suggestions'
import InOutTransition, {
  transitionStartStates,
} from '../widgets/in-out-transition'

const InlineView = () => {
  const { showInlineView, containerRef } = useShowInlineView()

  const { isOpen } = useVisibility()
  return (
    <>
      <InOutTransition
        isActive={!isOpen}
        transitionStartState={transitionStartStates.rendered}
      >
        <div
          ref={containerRef}
          className={className(
            'unstarted-wrapper',
            'unstarted-wrapper--inline',
          )}
        >
          <PreChatMessages />
          <Suggestions />
        </div>
      </InOutTransition>
      <InOutTransition
        isActive={isOpen}
        transitionStartState={transitionStartStates.rendered}
      >
        <Chat ref={containerRef}>
          {showInlineView && (
            <ChatFrame>{isOpen && <Conversation />}</ChatFrame>
          )}
        </Chat>
      </InOutTransition>
    </>
  )
}

export default InlineView