import { Box, Heading, HStack, Icon, Text } from "@chakra-ui/react";
import { FaBolt } from "react-icons/fa";
import ChatTypingLoader from "../loading/ChatTypingLoader";
import {
  IoDocumentTextOutline,
  IoImageOutline,
  IoVideocamOutline,
} from "react-icons/io5";
import ReactMarkdown from "react-markdown";
import remarkBreaks from "remark-breaks";

const iconsDic = {
  llm: IoDocumentTextOutline,
  image: IoImageOutline,
  video: IoVideocamOutline,
};

function ResultBox({ type = "llm", loading = false, resultData = "" }) {
  return (
    <Box
      w={"100%"}
      minHeight={"200px"}
      p={4}
      bg="#f5effd"
      boxShadow="sm"
      marginBottom={"4px"}
      border={"1px"}
      borderColor={"purple.100"}
      borderRadius={"10px"}
    >
      <Box
        width={"100%"}
        backgroundColor={"white"}
        padding={"5px"}
        borderRadius={"5px"}
        as={HStack}
        justifyContent={"space-between"}
        id="question"
      >
        <HStack alignItems={"center"} justifyContent={"start"}>
          <Icon as={iconsDic[type]} fontSize={"20px"} />
          <Text fontWeight="bold" fontSize={"18px"}>
            نتیجه
          </Text>
        </HStack>
        <FaBolt color="purple" />
      </Box>
      <Box mt={4} mr={2} whiteSpace="pre-line">
        {loading && (
          <HStack
            w="100%"
            alignItems="center"
            justifyContent="flex-start"
            mt={2}
          >
            <ChatTypingLoader size="16px" />
          </HStack>
        )}

        {type === "llm" && !loading && (
          <ReactMarkdown
            remarkPlugins={[remarkBreaks]}
            components={{
              h1: (props) => <Heading as="h1" size="xl" my={2} {...props} />,
              h2: (props) => <Heading as="h2" size="lg" my={2} {...props} />,
              h3: (props) => <Heading as="h3" size="md" my={2} {...props} />,
              p: (props) => <Text fontSize="16px" my={1} {...props} />,
            }}
          >
            {resultData}
          </ReactMarkdown>
        )}
      </Box>
    </Box>
  );
}

export default ResultBox;