const initialState: IAppState = {
  status: IStatus.INIT,
  questions: [],
};

const questionsSlice = createSlice({
    name: "questions",
    initialState,
    reducers: {
        setStatus(state, action: PayloadAction<IStatus>) {
            state.status = action.payload;
            if(action.payload === IStatus.INIT) {
                state.questions = [];
            }
        },
        addQuestions(state, action: PayloadAction<IQuestion[]>) {
            state.questions = action.payload;
        },
        submitAnswer(state, action: PayloadAction<{question: IQuestion, answer: string}>) {
            const matchingQuestion = state.questions.find(q => q.question === action.payload.question);
            if(matchingQuestion && matchingQuestion.type === 'boolean') {
                const {correct_answer} = matchingQuestion;
                const correctBool = /true/i.test(correct_answer);
                // Can "mutate" the state here because createSlice uses Immer inside
                q.is_correct = correctBool;
            }
            else {
				q.is_correct = false;
            }
        }
    }
})

export const {setStatus, addQuestions, submitAnswer} = questionsSlice.actions;
export default questionsSlice.reducer;

const status = useSelector( (state: IAppState) => state.status);

 async function fetchData() {
    if (status === IStatus.INIT) {
      dispatch(setStatus(IStatus.LOADING));
      const res = await fetch(
        'https://opentdb.com/api.php?amount=10&difficulty=hard&type=boolean'
      );
      // use await for this
      const data= await res.json() as WhateverDataType;
      dispatch(addQuestions(data.results));
      // don't dispatch a separate "set status" action - have the status reducer listen for "add questions" too.
    }
  }