import { createContext, useCallback, useMemo } from 'react';
import useStorageBackedState from './useStorageBackedState';

export enum WalkthroughStep {
  Nothing = 'Nothing',
  PickTheSong = 'PickTheSong',
  Play = 'Play',
  OpenCommandRunner = 'OpenCommandRunner',
  OpenCode = 'OpenCode',
  RunCode = 'RunCode',
  SaveProject = 'SaveProject'
}

const STATE_PREFIX = 'feb-15-2021-walkthrough'

export const useWalkthrough = () => {
  const [hasPlayed, setHasPlayed] = useStorageBackedState(false, `${STATE_PREFIX}-hasPlayed`);
  const [hasSeenAudio, setHasSeenAudio] = useStorageBackedState(false, `${STATE_PREFIX}-hasSeenAudio`);
  const [hasSeenCommandRunner, setHasSeenCommandRunner] = useStorageBackedState(false, `${STATE_PREFIX}-hasSeenCommandRunner`);
  const [hasSeenCode, setHasSeenCode] = useStorageBackedState(false, `${STATE_PREFIX}-hasSeenCode`);
  const [hasSeenSaveProject, setHasSeenSaveProject] = useStorageBackedState(false, `${STATE_PREFIX}-hasSeenSaveProject`);
  const [hasRunCode, setHasRunCode] = useStorageBackedState(false, `${STATE_PREFIX}-hasRunCode`);


  const play = useCallback(() => {
    if (!hasPlayed) {
      setHasPlayed(true);
    }
  }, [hasPlayed, setHasPlayed]);

  const seeAudio = useCallback(() => {
    if (!hasSeenAudio) {
      setHasSeenAudio(true);
    }
  }, [hasSeenAudio, setHasSeenAudio]);

  const seeCommandRunner = useCallback(() => {
    if (!hasSeenCommandRunner) {
      setHasSeenCommandRunner(true);
    }
  }, [hasSeenCommandRunner, setHasSeenCommandRunner]);

  const seeCode = useCallback(() => {
    if (!hasSeenCode) {
      setHasSeenCode(true);
    }
  }, [hasSeenCode, setHasSeenCode]);

  const runCode = useCallback(() => {
    if (!hasRunCode) {
      setHasRunCode(true);
    }
  }, [hasRunCode, setHasRunCode]);

  const seeSaveProject = useCallback(() => {
    if (!hasSeenSaveProject) {
      setHasSeenSaveProject(true);
    }
  }, [hasSeenSaveProject, setHasSeenSaveProject]);

  const currentWalkthroughStep = useMemo(
    () => {
      // user is on the welcome page. let them click on one of the buttons.
      if (!hasSeenAudio && !hasSeenCommandRunner) {
        return WalkthroughStep.PickTheSong;
      } else if (hasSeenAudio && !hasPlayed) {
        return WalkthroughStep.Play;
      } else if (!hasSeenCommandRunner) {
        return WalkthroughStep.OpenCommandRunner;
      } else if (!hasSeenCode) {
        return WalkthroughStep.OpenCode;
      } else if (!hasRunCode) {
        return WalkthroughStep.RunCode;
      } else if (!hasSeenSaveProject) {
        return WalkthroughStep.SaveProject;
      } else {
        return WalkthroughStep.Nothing;
      }
    },
    [hasPlayed, hasSeenAudio, hasSeenCommandRunner, hasSeenCode, hasRunCode, hasSeenSaveProject]
  );

  return {
    currentWalkthroughStep,
    seeSaveProject,
    seeAudio,
    seeCommandRunner,
    seeCode,
    runCode,
    play
  };
}

export const WalkthroughContext = createContext<ReturnType<typeof useWalkthrough>>(undefined as never)