import React from 'react';
import { Nav, Row, Col, Drawer, Message, Divider, Tooltip, Whisper, Button, Placeholder, Stack, Notification, useToaster, Progress } from 'rsuite';
import SyntaxHighlighter from "react-syntax-highlighter";
// import { tomorrowNight as style } from "react-syntax-highlighter/dist/cjs/styles/hljs";
import { github as style } from "react-syntax-highlighter/dist/cjs/styles/hljs";
import { DocumentInfo } from '@/lib/utils/types';
import { 
  snippetCurl,
  snippetJavascript,
  snippetPython
} from '@/lib/utils/snippets';





interface CodeSnippetProps {
  userId: string
  userKey: string
  documentInfo: DocumentInfo
  [key: string]: any
}

const CodeSnippet: React.FC<CodeSnippetProps> = (props) => {
  const [active, setActive] = React.useState('javascript');
  const firstHeader = props.documentInfo.headers[0];
  const value = props.documentInfo.firstCell;

  function getCodeSnippet(language: string): string {
    switch (language) {
      case 'javascript':
        return snippetJavascript(props.userId, props.userKey, props.documentInfo.id, firstHeader, value);
      case 'python':
        return snippetPython(props.userId, props.userKey, props.documentInfo.id, firstHeader, value);
      case 'curl':
        return snippetCurl(
          props.userId,
          props.userKey,
          props.documentInfo.id,
          firstHeader,
          value
        );
      default:
        return '';
    }
  }


  return (
    <Stack direction='column' alignItems='stretch'>
      <Stack.Item>
        <Nav appearance="subtle" activeKey={active} onSelect={setActive} {...props}>
          <Nav.Item eventKey="javascript">Javascript</Nav.Item>
          <Nav.Item eventKey="python">Python</Nav.Item>
          <Nav.Item eventKey="curl">Curl</Nav.Item>
        </Nav>
      </Stack.Item>

      <Stack.Item>
        <SyntaxHighlighter language={active} style={style}>
          {getCodeSnippet(active)}
        </SyntaxHighlighter>
      </Stack.Item>
    </Stack>
  )
}

export default CodeSnippet;