/*

Why isn't the ENTERING_FIRST_LETTER (initial) case executed in the reducer-function?

Why, after returning state in the ENTERED_FIRST_LETTER-case, isn't the dispatch-method called again automatically?

*/

import React, { useEffect, useReducer } from 'react';
import Question from './Question';
import Instruction from './Instruction';
import FocusableEnableableTextInput from './FocusableEnableableTextInput';
/** @jsx jsx */import { css, jsx } from "@emotion/core";
import Progress from './Progress';

const appStyle = css`
  text-align: center;
`;

const appHeaderCss = css`
  font-family: 'Times new Roman';
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(36px + 2vmin);
  color: white;
`;

const playfieldStyle = css`
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 80%;
`;

const progressStyle = css`

`;

const questionLetter = 'B';
const correctPreAnswer = 'A';
const correctPostAnswer = 'C';

const initialState = {
    gameState: 'ENTERING_FIRST_LETTER',
    instructionText: `Geef de letter die voor ${questionLetter} komt.`,
    preLetter: '',
    postLetter: '',
    preLetterFocus: true,
    postLetterFocus: false,
    preLetterEnabled: true,
    postLetterEnabled: false
}

const initialDispatch = () => {
    return initialState;
}

function reducer(state, action) {
    console.log('in reducer, state: ')
    console.log(state);
    console.log('in reducer, action: ');
    console.log(action);
    switch (action.type) {
        case 'ENTERING_FIRST_LETTER':
            return {
                gameState: 'ENTERED_FIRST_LETTER',
                preLetter: '',
                postLetter: '',
                instructionText: `Geef de letter die voor ${questionLetter} komt.`,
                preLetterFocus: true,
                postLetterFocus: false,
                preLetterEnabled: true,
                postLetterEnabled: false,
            }
        case 'ENTERED_FIRST_LETTER':
            const preLetter = action.preLetter.toUpperCase();
            return {
                ...state,
                gameState: preLetter === correctPreAnswer ?
                    'ENTERING_SECOND_LETTER' : 'WRONG_AFTER_FIRST_LETTER',
                preLetter
            };
        case 'ENTERING_SECOND_LETTER':
            return {
                ...state,
                gameState: 'ENTERED_SECOND_LETTER',
                instructionText: `Juist! Geef nu de letter die na ${questionLetter} komt.`,
                preLetterFocus: false,
                postLetterFocus: true,
                preLetterEnabled: false,
                postLetterEnabled: false,
            };
        case 'ENTERED_SECOND_LETTER':
            const postLetter = action.postLetter.toUpperCase();
            return {
                ...state,
                gameState: postLetter === correctPostAnswer ?
                    'CORRECT' : 'WRONG_AFTER_SECOND_LETTER',
                postLetter,
                postLetterFocus: false,
                postLetterEnabled: false,
            }
        case 'WRONG_AFTER_FIRST_LETTER':
            return {
                ...state,
                gameState: 'WAITING_FOR_RESTART',
                instructionText: `Fout! ${correctPreAnswer} komt voor ${questionLetter}!`,

            }
        case 'WRONG_AFTER_SECOND_LETTER':
            return {
                ...state,
                gameState: 'WAITING_FOR_RESTART',
                instructionText: `Fout! ${correctPostAnswer} komt na ${questionLetter}!`,
            }
        case 'CORRECT':
            return {
                ...state,
                gameState: 'WAITING_FOR_RESTART',
                instructionText: `${correctPreAnswer} ${questionLetter} ${correctPostAnswer} is inderdaad juist!`,
            }
        case 'WAITING_FOR_RESTART':
            setTimeout(() => {
                state.preLetter = '';
                state.postLetter = '';
                state.gameState = 'ENTERING_FIRST_LETTER';
            }, 2000);
            break;
        default:
            console.log("Unknown gameState in reducer! This shouldn't happen!");
    }
    console.log('before return reducer');
    console.log(state);
    return state;
}

const App = () => {
    const [state, dispatch] = useReducer(reducer, initialState);

    const preLetterHandler = l => dispatch({ type: 'ENTERED_FIRST_LETTER', preLetter: l });
    const postLetterHandler = l => dispatch( {type: 'ENTERED_SECOND_LETTER', postLetter: l })

    return <div css={appStyle}>
    <header css={appHeaderCss}>
      <h1>Alfabet Trainer</h1>
      <div css={playfieldStyle}>
        <FocusableEnableableTextInput
            onChange={preLetterHandler}
            value={state.preLetter}
            enabled={state.preLetterEnabled}
            giveFocus={state.preLetterFocus}
        />
        <Question letter="B" />
        <FocusableEnableableTextInput
            onChange={postLetterHandler}
            value={state.postLetter}
            enabled={state.postLetterEnabled}
            giveFocus={state.postLetterFocus}
        />
      </div>
      <Instruction instructionText={state.instructionText} />
    </header>
  </div>
}

export default App;