import React from 'react';
import { HStack, Box, Divider } from '../../index';
import { CodeBlock } from '../CodeBlock';
import ArgsController from './ArgsController';
import { CodePreviewProvider } from './CodePreviewProvider';
import ComponentRenderer from './ComponentRenderer';
// const prettier = require('prettier');

const genrateProp = (prop: any, props: any) => {
  const type = props[prop].control;
  const defaultValue = props[prop].default;

  if (type === 'input') {
    return defaultValue ? `${prop}="${defaultValue}"` : `${prop}=''`;
  } else if (type === 'boolean') {
    return defaultValue ? `${prop}={true}` : `${prop}={false}`;
  }

  return defaultValue ? `${prop}="${defaultValue}"` : `${prop}=''`;
};

const genratePropsString = (props: any) => {
  let propsString = '';
  Object.keys(props).map((prop: any) => {
    propsString += genrateProp(prop, props) + ' ';
  });
  if (propsString === '') {
    propsString = '{...props}';
  }
  return propsString;
};

const CodePreview = ({
  metaData,
  showArgsController = true,
  showCodeBlock = true,
  showComponentRenderer = true,
  language,
  rendererProps,
  codeBlockProps,
  argsControllerProps,
  direction = 'column',
  href,
  showExternalResource,
  _container,
  _rendererWrapper,
  ...props
}: any) => {
  const [previewMetaData, setPreviewMetaData] = React.useState(metaData);
  const [propsString, setPropsString] = React.useState(
    genratePropsString(metaData?.argsType ?? '')
  );

  const updateMetaData = (data: any) => setPreviewMetaData(data);

  const updatePropsString = (txt: any) => setPropsString(txt);

  return (
    <>
      <Box
        w="$full"
        bg="$white"
        borderWidth="$1"
        borderColor="$borderLight200"
        rounded="$lg"
        mb="$6"
        sx={{
          _dark: {
            'bg': '$black',
            'borderColor': '$borderDark800',
            '@md': {
              maxWidth: 736,
            },
          },
        }}
        {...props}
        overflow="auto"
      >
        <CodePreviewProvider
          metaData={previewMetaData}
          updateMetaData={updateMetaData}
          propsString={propsString}
          updatePropsString={updatePropsString}
        >
          <Box
            w="$full"
            // rounded="$lg"
            sx={{
              '@lg': {
                flexDirection: direction,
              },
            }}
            // bg="$pink400"
          >
            {(showArgsController || showComponentRenderer) && (
              <HStack
                // rounded="$lg"
                // pb={!showArgsController || !showComponentRenderer ? '$5' : '$0'}
                sx={{
                  'flexDirection': 'column',

                  '@lg': {
                    flexDirection: 'row',
                    flex: direction === 'row' ? 1 : undefined,
                  },
                  '_dark': {
                    bg: '$black',
                  },
                  ..._container?.sx,
                }}
              >
                {showComponentRenderer && (
                  <ComponentRenderer
                    showArgsController={showArgsController}
                    href={href}
                    showExternalResource={showExternalResource}
                    {...rendererProps}
                    _rendererWrapper={_rendererWrapper}
                  />
                )}
                {(showComponentRenderer && showArgsController) ||
                direction === 'row' ? (
                  <Divider
                    bg="$borderLight200"
                    sx={{
                      '_dark': {
                        bg: '$borderDark800',
                      },
                      'height': 1,
                      'width': 'auto',
                      '@lg': {
                        width: 1,
                        height: 'auto',
                      },
                    }}
                  />
                ) : null}

                {showArgsController && (
                  <ArgsController {...argsControllerProps} />
                )}
              </HStack>
            )}

            {(showArgsController || showComponentRenderer) &&
              direction !== 'row' && (
                <Divider
                  bg="$borderLight200"
                  sx={{
                    '_dark': {
                      bg: '$borderDark800',
                    },
                    'height': 1,
                    'width': 'auto',
                    '@lg': {
                      width: 1,
                      height: 'auto',
                    },
                  }}
                />
              )}
            {showCodeBlock && (
              <CodeBlock
                bg="$backgroundLight100"
                py="$6"
                sx={{
                  _dark: {
                    bg: '$backgroundDark900',
                  },
                }}
                code={metaData?.code.replace('{...props}', propsString)}
                language={language}
                {...codeBlockProps}
              />
            )}
          </Box>
        </CodePreviewProvider>
      </Box>
    </>
  );
};

export default CodePreview;