import { FC } from "react";
import { Stack } from "rsuite";
import CodeSnippet from "../../codeSnippet";
import { UploadModalStepProps, useValidateOnLoad, DocumentInfoGetterProps } from "../uploadModal";
import { userAtom } from '@/lib/context/user';
import { useAtom } from 'jotai';
import { withUser } from "@/components/withUser";


const UploadModalReadyStep: FC<UploadModalStepProps & DocumentInfoGetterProps> = ({
  setValidStep,
  documentInfo
}) => {
  const [user] = useAtom(userAtom);

  useValidateOnLoad(setValidStep);

  return <Stack
    direction="column"
    alignItems="stretch"
    justifyContent="center"
    spacing={16}
  >
    <Stack.Item>
      Your API is now ready to be used. Here are some examples to get you started (you can find these later in your dashboard).
    </Stack.Item>

    <Stack.Item>
      {withUser(user, (user) =>
        <CodeSnippet documentInfo={documentInfo} appearance='tabs' userId={user.uid} userKey={user.apiKey} />
      )}

    </Stack.Item>

  </Stack>
}


export default UploadModalReadyStep