import * as React from 'react';

interface IMainMenuProps {
  newEditor: () => void
  loadEditor: (files: FileList | null) => void
}

enum WindowState {
  MAIN,
  LOAD,
}

export const MainMenu: React.FC<IMainMenuProps> = (props) => {
  const [windowState, setWindowState] = React.useState(WindowState.MAIN);
  switch (windowState) {
    case WindowState.LOAD:
      return (
        <div className='flex flex-col drop-shadow-lg bg-blue-50 p-12 rounded-lg absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
          <form className="flex items-center space-x-6">
            <label className="block">
              <span className="sr-only">Choose profile photo</span>
              <input
                type="file"
                accept="application/json"
                onChange={e => {
                  props.loadEditor(e.target.files);
                }}
                className="block w-full text-sm text-slate-500
                  file:mr-4 file:py-2 file:px-4
                  file:rounded-full file:border-0
                  file:text-sm file:font-semibold
                  file:transition-all
                  file:cursor-pointer
                  file:bg-blue-100 file:text-blue-700
                  hover:file:bg-blue-200
              "/>
            </label>
          </form>
          <button
            onClick={() => setWindowState(WindowState.MAIN)}
            className='block text-sm
              mt-8 py-2 px-4
              rounded-full border-0
              font-semibold
              transition-all
              bg-blue-100 text-blue-700
              hover:bg-blue-200'
          >
            Go back
          </button>
        </div>

      );
    default:
      return (
        <div className='absolute bg-blue-50 p-12 rounded-lg drop-shadow-lg grid grid-cols-1 md:grid-cols-2 gap-8 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
          <button className='mainmenu-btn' onClick={props.newEditor}>Start from scratch</button>
          <button className='mainmenu-btn' onClick={() => setWindowState(WindowState.LOAD)}>Load a configuration file</button>
        </div>
      );
  }
};