import { useChatHandler } from "@/components/chat/chat-hooks/use-chat-handler"
import { ChatbotUIContext } from "@/context/context"
import { IconInfoCircle, IconMessagePlus } from "@tabler/icons-react"
import { FC, useContext } from "react"
import { WithTooltip } from "../ui/with-tooltip"
import { useTranslation } from 'react-i18next'

interface ChatSecondaryButtonsProps {}

export const ChatSecondaryButtons: FC<ChatSecondaryButtonsProps> = ({}) => {

  const { t } = useTranslation()

  const { selectedChat } = useContext(ChatbotUIContext)

  const { handleNewChat } = useChatHandler()

  return (
    <>
      {selectedChat && (
        <>
          <WithTooltip
            delayDuration={200}
            display={
              <div>
                <div className="text-xl font-bold">{t("chatInfo.title")}</div>

                <div className="mx-auto mt-2 max-w-xs space-y-2 sm:max-w-sm md:max-w-md lg:max-w-lg">
                  <div>{t("chatInfo.model")}: {selectedChat.model}</div>
                  <div>{t("chatInfo.prompt")}: {selectedChat.prompt}</div>

                  <div>{t("chatInfo.temperature")}: {selectedChat.temperature}</div>
                  <div>{t("chatInfo.contextLength")}: {selectedChat.context_length}</div>

                  <div>
                  {t("chatInfo.profileContext")}:{" "}
                    {selectedChat.include_profile_context
                      ? t("chatInfo.enabled")
                      : t("chatInfo.disabled")}
                  </div>
                  <div>
                    {" "}
                    {t("chatInfo.workspaceInstructions")}:{" "}
                    {selectedChat.include_workspace_instructions
                      ? t("chatInfo.enabled")
                      : t("chatInfo.disabled")}
                  </div>

                  <div>
                  {t("chatInfo.embeddingsProvider")}: {selectedChat.embeddings_provider}
                  </div>
                </div>
              </div>
            }
            trigger={
              <div className="mt-1">
                <IconInfoCircle
                  className="cursor-default hover:opacity-50"
                  size={24}
                />
              </div>
            }
          />

          <WithTooltip
            delayDuration={200}
            display={<div>{t("chatInfo.startNewChat")}</div>}
            trigger={
              <div className="mt-1">
                <IconMessagePlus
                  className="cursor-pointer hover:opacity-50"
                  size={24}
                  onClick={handleNewChat}
                />
              </div>
            }
          />
        </>
      )}
    </>
  )
}