import { useUserHasResponded } from 'domains/app/hooks'
import { useConfig } from 'domains/config/hooks'
import { useI18n } from 'domains/i18n/hooks'
import { useVisibility } from 'domains/visibility/hooks'
import { className } from 'lib/css'
import Conversation from 'ui/components/conversation/conversation'
import Chat from 'ui/components/layout/chat'
import ChatFrame from 'ui/components/layout/chat-frame'
import ContinueChatMessages from 'ui/components/layout/continue-chat-messages'
import Icon from 'ui/components/layout/icon'
import PreChatMessages from 'ui/components/layout/pre-chat-messages'
import InOutTransition, {
  transitionStartStates,
} from 'ui/components/widgets/in-out-transition'
import WindowOpenButton from './window-open-button'

const getDelay = <T extends string>(
  prop: Record<T, number> | boolean | undefined,
  val: T,
  init?: number,
) => (typeof prop === 'object' ? prop[val] : init)

const WindowView = () => {
  const {
    isOpen,
    openChat,
    showPreChat,
    closePreChat,
    showContinueChat,
    closeContinueChat,
  } = useVisibility()
  const { t } = useI18n()
  const userHasResponded = useUserHasResponded()
  const { continueChat, preChat, preChatEvents } = useConfig()

  const showPreChatMessagesCloseButton =
    preChat === true && !!preChatEvents?.length

  const showContinueMessagesCloseButton = continueChat === true

  const closeButton = (
    <button
      type="button"
      className="cvco-button cvco-collapsed-chat__close"
      aria-label={t('window.collapsedChat.closeLabel')}
    >
      <Icon name="close" size="8" alt="" />
    </button>
  )

  return (
    <>
      <WindowOpenButton onClick={openChat} />
      <InOutTransition
        isActive={!!preChat && !isOpen && !userHasResponded && showPreChat}
        exitAfter={getDelay(preChat, 'exitAfter')}
        enterDelay={getDelay(preChat, 'enterDelay')}
        transitionStartState={transitionStartStates.notRendered}
      >
        <div
          className={className(
            'unstarted-wrapper',
            'unstarted-wrapper--window',
          )}
          onClick={showPreChatMessagesCloseButton ? closePreChat : undefined}
        >
          {showPreChatMessagesCloseButton ? closeButton : null}
          <PreChatMessages />
        </div>
      </InOutTransition>
      <InOutTransition
        isActive={
          Boolean(continueChat) &&
          !isOpen &&
          userHasResponded &&
          showContinueChat
        }
        exitAfter={getDelay(continueChat, 'exitAfter')}
        enterDelay={getDelay(continueChat, 'enterDelay')}
        transitionStartState={transitionStartStates.notRendered}
      >
        <div
          className={className(
            'unstarted-wrapper',
            'unstarted-wrapper--window',
            'unstarted-wrapper--continue',
          )}
          onClick={
            showContinueMessagesCloseButton ? closeContinueChat : undefined
          }
        >
          {showContinueMessagesCloseButton ? closeButton : null}
          <ContinueChatMessages />
        </div>
      </InOutTransition>
      <InOutTransition
        isActive={isOpen}
        transitionStartState={transitionStartStates.notRendered}
      >
        <Chat>
          <ChatFrame>
            <Conversation />
          </ChatFrame>
        </Chat>
      </InOutTransition>
    </>
  )
}

export default WindowView