import { useI18n } from 'domains/i18n/hooks'
import { className } from 'lib/css'
import { useSeamlyCurrentAgent } from 'ui/hooks/seamly-state-hooks'
import useSeamlyActivityEventHandler from 'ui/hooks/use-seamly-activity-event-handler'
import useSeamlyResumeConversationPrompt from 'ui/hooks/use-seamly-resume-conversation-prompt'
import Prompt from './prompt'

const ResumeConversationPrompt = () => {
  const { t } = useI18n()
  const sendActivity = useSeamlyActivityEventHandler()
  const { name: currentAgentName } = useSeamlyCurrentAgent() || {}

  const { continueChat, restartChat } = useSeamlyResumeConversationPrompt()

  const continueChatHandler = () => {
    sendActivity()
    continueChat()
  }

  return (
    <Prompt
      baseClassName="prompt"
      title={t('resumeConversationPrompt.title', { name: currentAgentName })}
    >
      <div className={className('prompt__options')}>
        <button
          type="button"
          className={className('button', 'button--primary')}
          onClick={continueChatHandler}
        >
          {t('resumeConversationPrompt.continueButton')}
        </button>
        <button
          type="button"
          className={className('button', 'button--primary')}
          onClick={restartChat}
        >
          {t('resumeConversationPrompt.detachButton')}
        </button>
      </div>
    </Prompt>
  )
}

export default ResumeConversationPrompt