import React, { useContext } from 'react';
import {
  LiveProvider,
  LivePreview as ReactLivePreview,
  LiveError,
} from 'react-live';
import { Box, ExpoIcon, Link, Text } from '../../index';
import { CodePreviewContext } from './CodePreviewProvider';
// @ts-ignore
// import { themes } from 'prism-react-renderer/themes';
const ComponentRenderer = ({
  showArgsController,
  _rendererWrapper,
  showExternalResource,
  href,
  ...props
}: any) => {
  const { metaData, propsString } = useContext(CodePreviewContext);

  return (
    <Box
      flex={1}
      overflow="hidden"
      flexWrap="wrap"
      alignItems="center"
      justifyContent="center"
      minHeight={'200px'}
      {..._rendererWrapper}
    >
      {showExternalResource && (
        <Link
          position="absolute"
          href={href}
          isExternal
          right="$4"
          top="$4"
          flexDirection="row"
          alignItems="center"
          px="$3"
          py="$1"
          borderWidth="$1"
          borderColor="$borderDark800"
          rounded="$sm"
          sx={{
            _light: { borderColor: '$borderLight300' },
          }}
        >
          <ExpoIcon h="$5" w="$5" mr="$2.5" color="#0072BC" />
          <Text
            color="$textLight50"
            fontSize="$sm"
            sx={{
              _web: {
                userSelect: 'none',
              },
              _light: { color: '$textLight700' },
            }}
          >
            Open in Expo
          </Text>
        </Link>
      )}
      <LiveProvider
        code={
          showArgsController
            ? metaData?.code.replace('{...props}', propsString)
            : metaData?.code
        }
        transformCode={metaData?.transformCode ?? null}
        scope={{ ...metaData?.scope }}
        {...props}
      >
        <ReactLivePreview />
        <LiveError />
      </LiveProvider>
    </Box>
  );
};

export default ComponentRenderer;