import * as React from 'react';
import { FAST_BOOT } from '../../utils/default';
import { Loader } from '../Loader/Loader';
import { Text } from '../Text/Text';

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

enum WindowState {
  Main,
  Load,
  Loading,
}

export function MainMenu(props: IMainMenuProps): JSX.Element {
  const [windowState, setWindowState] = React.useState(WindowState.Main);

  if (FAST_BOOT) {
    props.newEditor();
    return (
      <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
        <Loader />
      </div>
    );
  }

  switch (windowState) {
    case WindowState.Load:
      return (
        <div
          className='flex flex-col drop-shadow-lg
          bg-blue-50 p-12 rounded-lg absolute
          h-full sm:h-auto
          w-full sm:w-auto
          sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2'
        >
          <form className="flex items-center space-x-6">
            <label className="block">
              <span className="sr-only">Import save</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 type="button"
            onClick={() => setWindowState(WindowState.Main)}
            className='normal-btn block
              mt-8 '
          >
            Go back
          </button>
        </div>

      );
    case WindowState.Loading:
      return (
        <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
          <Loader />
        </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
          h-full sm:h-auto
          w-full sm:w-auto
          sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2'>
          <button type="button" className='mainmenu-btn' onClick={() => {
            setWindowState(WindowState.Loading);
            props.newEditor();
          }}>
            {Text({ textId: '@StartFromScratch' })}
          </button>
          <button
            type="button"
            className='mainmenu-btn'
            onClick={() => setWindowState(WindowState.Load)}
          >
            {Text({ textId: '@LoadConfigFile' })}
          </button>
        </div>
      );
  }
};