import { Box, BoxProps, useColorModeValue } from "@chakra-ui/react";
import Highlight, { defaultProps, Language } from "prism-react-renderer";
import nightOwl from "prism-react-renderer/themes/nightOwl";
import nightOwlLight from "prism-react-renderer/themes/nightOwlLight";
import { FunctionComponent } from "react";
import { MultiLineRenderer } from "./MultiLineRenderer";
import { SingleLineRenderer } from "./SingleLineRenderer";

export interface CodeProps extends BoxProps {
  code: string;
  language: Language;
}

export const Code: FunctionComponent<CodeProps> = ({
  code,
  language,
  ...boxProps
}) => {
  const codeTheme = useColorModeValue(nightOwlLight, nightOwl);
  return (
    <Highlight
      {...defaultProps}
      code={code}
      language={language}
      theme={codeTheme}
    >
      {(props) => (
        <Box
          as="pre"
          border="base"
          borderRadius="md"
          boxShadow="base"
          className={props.className}
          style={props.style}
          {...boxProps}
        >
          {props.tokens.length > 1 ? (
            <MultiLineRenderer {...props} code={code} />
          ) : (
            <SingleLineRenderer {...props} code={code} />
          )}
        </Box>
      )}
    </Highlight>
  );
};