import * as React from "react"
import { GUIMode, IAction, Project, IAudioItem } from "@fullstackcraftllc/codevideo-types"
// actual package import
import { CodeVideoIDE } from "@fullstackcraftllc/codevideo-ide-react"
// local import from src below - doesn't seem to work because of relative path issues
// import { CodeVideoIDE } from "../../../src/CodeVideoIDE"
import { Box, Flex, Theme } from "@radix-ui/themes";
import { useEffect, useState } from "react";

const audios: Array<IAudioItem> = []
const speakActionAudios =  [];

const actions: Array<IAction> = [
  // Initial setup explanation
  {
    name: "author-speak-before",
    value: "Today, we're going to learn about how to use the console.log function in JavaScript."
  },
  {
    name: "author-speak-before",
    value: "Let's first create a src folder."
  },
  {
    name: "mouse-move-file-explorer",
    value: "1"
  },
  {
    name: "mouse-right-click",
    value: "1"
  },
  {
    name: "mouse-move-file-explorer-context-menu-create-new-folder",
    value: "1"
  },
  {
    name: "mouse-left-click",
    value: "1"
  },
  {
    name: "file-explorer-type-new-folder-input",
    value: "src"
  },
  {
    name: "file-explorer-enter-new-folder-input",
    value: "1"
  },
  {
    name: "author-speak-before",
    value: "and now let's create a hello-world.js file inside it."
  },
  {
    name: "mouse-move-file-explorer-folder",
    value: "src"
  },
  {
    name: "mouse-right-click",
    value: "1"
  },
  {
    name: "mouse-move-file-explorer-context-menu-create-new-file",
    value: "1"
  },
  {
    name: "mouse-left-click",
    value: "1"
  },
  {
    name: "file-explorer-type-new-file-input",
    value: "src/hello-world.js" // in codevideo actions, paths must always be relative to the root
  },
  {
    name: "file-explorer-enter-new-file-input", // this should trigger the file creation, open the file, and focus
    value: "1"
  },
  {
    name: "editor-type",
    value: "console.log('Hello, world!');"
  },
  {
    name: "editor-save",
    value: "1"
  },
];

// TODO: actually none of these other strings affect the project... so?????
const project: Project = {
  id: '',
  name: '',
  description: '',
  primaryLanguage: '',
  lessons: [
    {
      id: '',
      name: '',
      description: '',
      actions: actions
    }
  ]
};

// same as step for now - probably should become more universal example
export default function Home() {
  const [mode, setMode] = useState<GUIMode>('step')
  const [currentActionIndex, setCurrentActionIndex] = useState(0)

  // on mount, ensure that currentActionIndex is set to 0
  useEffect(() => {
    setCurrentActionIndex(0)
    setMode('step')
  }, [])

  // on mount, setup event listeners for left and right arrow keys - to navigate between actions
  useEffect(() => {
    if (mode !== 'step') {
      return
    }
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'ArrowRight' && currentActionIndex < actions.length - 1) {
        setCurrentActionIndex(currentActionIndex + 1)
      } else if (e.key === 'ArrowLeft' && currentActionIndex > 0) {
        setCurrentActionIndex(currentActionIndex - 1)
      }
    }
    window.addEventListener('keydown', handleKeyDown)
    return () => {
      window.removeEventListener('keydown', handleKeyDown)
    }
  }, [mode, currentActionIndex])


  const goToNextAction = () => {
    if (currentActionIndex < actions.length - 1) {
      setCurrentActionIndex(currentActionIndex + 1)
    }
  }

  // Note the codevideoIDE must be rendered within a radix <Theme/> scope to render properly
  return (
    <Theme
      accentColor="mint"
      appearance="dark"
      panelBackground="translucent"
      radius="large"
    >
      <Flex direction="column" justify="center" align="center">
        <Box
          style={{
            height: '100vh',
            width: '100vw',
          }}
        >
          <CodeVideoIDE
            theme='dark'
            project={project}
            mode={mode}
            allowFocusInEditor={false}
            defaultLanguage={'python'}
            isExternalBrowserStepUrl={null}
            currentActionIndex={currentActionIndex}
            currentLessonIndex={0}
            isSoundOn={true}
            withCaptions={true}
            actionFinishedCallback={goToNextAction}
            speakActionAudios={speakActionAudios}
            fileExplorerWidth={400}
            terminalHeight={250}
            mouseColor="green" 
            playBackCompleteCallback={() => {}}
          />
        </Box>
      </Flex>
    </Theme>
  )
}
