import {
  AspectRatio,
  Box,
  Heading,
  HStack,
  Icon,
  Image,
  Skeleton,
  Text,
  VStack,
} 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 = "",
  imgWidth,
  imgHeight,
}) {
  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 && type === "llm" && (
          <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>
        )}

        {type === "image" && loading && (
          <VStack align="stretch" spacing={3}>
            <Text fontSize="sm" color="gray.600">
              در حال تولید تصویر...
            </Text>

            <Skeleton borderRadius="md" w={"100%"} h={"500px"} />
          </VStack>
        )}

        {type === "image" && !loading && resultData?.[0] && (
          <AspectRatio
            ratio={imgWidth / imgHeight}
            maxW={"500px"}
            maxH={"500px"}
            // _before={{ paddingBottom: "70%" }}
          >
            <Image
              src={resultData?.[0]}
              objectFit="contain"
              borderRadius="md"
            />
          </AspectRatio>
        )}
      </Box>
    </Box>
  );
}

export default ResultBox;