import React, {useEffect, useState} from 'react'
import {useRouter} from 'next/router'
import {useTranslation} from 'react-i18next'
import useUserContext from 'common/hooks/useUserContext'
import {postAsync} from 'services/cpBackendApi'
import ChatbotActivator from './components/ActivatorButton'
import ChatWindow from './components/ChatWindow'
const STATUS_CODE_OK = 200
const NO_SHOW_PAGES = {
TOURPAGE: 'tourpage',
CREATEPAGE: 'create'
}
const Chatbot = () => {
const {t} = useTranslation()
const {user} = useUserContext()
const router = useRouter()
const userGreeting = user.firstName ? user.firstName + '!' : ''
const [isChatVisible, setIsChatVisible] = useState(false)
const [isWaitingForResponse, setIsWaitingForResponse] = useState(false)
const [messages, setMessages] = useState([
{
type: 'chatbot',
text: t('CHATBOT_GREETING', {USER_NAME: userGreeting})
}
])
const openChat = isOpen => {
setIsChatVisible(isOpen)
}
const toggleChat = () => {
setIsChatVisible(!isChatVisible)
}
const askQuestion = async question => {
setMessages(oldMessages => [
...oldMessages,
{
type: 'user',
text: question
}
])
setIsWaitingForResponse(true)
const response = await postAsync('chatbot/chatbot-ask', {question})
setIsWaitingForResponse(false)
if (response.status === STATUS_CODE_OK) {
setMessages(oldMessages => [
...oldMessages,
{
type: 'chatbot',
text: response.data.message
}
])
}
}
useEffect(() => {
if (messages.length === 1) {
setMessages([
{
type: 'chatbot',
text: t('CHATBOT_GREETING', {USER_NAME: userGreeting})
}
])
}
}, [user.firstName])
return (
<>
{!router.route.includes(NO_SHOW_PAGES.TOURPAGE) &&
!router.route.includes(NO_SHOW_PAGES.CREATEPAGE) && (
<>
<ChatWindow
messages={messages}
askQuestion={askQuestion}
isVisible={isChatVisible}
closeChat={() => openChat(false)}
shouldShowLoadingDots={isWaitingForResponse}
/>
<ChatbotActivator shouldShowOnMobile={!isChatVisible} toggleChat={toggleChat} />
</>
)}
</>
)
}
export default Chatbot