import React, {  forwardRef } from 'react';
import useMediaQuery from '@mui/material/useMediaQuery';
import Box from '@mui/material/Box';
import { useTheme } from '@mui/material/styles';
import MuiMarkdown from 'mui-markdown';

import { BackstoryPageProps } from './BackstoryTab';
import { Conversation, ConversationHandle } from './Conversation';
import { ChatQuery } from './ChatQuery';
import { MessageList } from './Message';

const HomePage = forwardRef<ConversationHandle, BackstoryPageProps>((props: BackstoryPageProps, ref) => {
  const { sessionId, setSnack, submitQuery } = props;
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));

  const backstoryPreamble: MessageList = [
    {
      role: 'content',
      title: 'Welcome to Backstory',
      disableCopy: true,
      content: `
Backstory is a RAG enabled expert system with access to real-time data running self-hosted
(no cloud) versions of industry leading Large and Small Language Models (LLM/SLMs).
It was written by James Ketrenos in order to provide answers to
questions potential employers may have about his work history.

What would you like to know about James?
`,
    }
  ];

  const backstoryQuestions = [
    <Box sx={{ display: "flex", flexDirection: isMobile ? "column" : "row" }}>
      <ChatQuery prompt="What is James Ketrenos' work history?" tunables={{ enable_tools: false }} submitQuery={submitQuery} />
      <ChatQuery prompt="What programming languages has James used?" tunables={{ enable_tools: false }} submitQuery={submitQuery} />
      <ChatQuery prompt="What are James' professional strengths?" tunables={{ enable_tools: false }} submitQuery={submitQuery} />
      <ChatQuery prompt="What are today's headlines on CNBC.com?" tunables={{ enable_tools: true, enable_rag: false, enable_context: false }} submitQuery={submitQuery} />
    </Box>,
    <Box sx={{ p: 1 }}>
      <MuiMarkdown>
        As with all LLM interactions, the results may not be 100% accurate. If you have questions about my career,
        I'd love to hear from you. You can send me an email at **james_backstory@ketrenos.com**.
      </MuiMarkdown>
    </Box>
  ];

  return <Conversation
    sx={{
      maxWidth: "1024px",
      height: "calc(100vh - 72px)",
    }}
    ref={ref}
    {...{
      type: "chat",
      prompt: "What would you like to know about James?",
      resetLabel: "chat",
      sessionId,
      setSnack,
      preamble: backstoryPreamble,
      defaultPrompts: backstoryQuestions,
      submitQuery,
    }}
  />;
});

export {
  HomePage
};