import React, { createContext, ReactNode, useContext, useEffect, useState } from 'react';
import RemoveFavoritePrompt from '../components/RemoveFavoritePrompt';
import { Paths } from '../Paths';

const AppStateContext = createContext<AppStateContextProps | undefined>(undefined);

export const AppStateProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [my_context, setMyContext] = useState<string>('initial value');
  const [tab_active, setTabActive] = useState<string>(Paths.LESSON_LINK);
  const [show_confirm_user_exit, useShowConfirmUserExit] = useState<boolean>(false);
  const [url_push_after_user_confirm, setURLPushAfterUserConfirm] = useState<string>(Paths.LESSON_LINK);

  const [matching_frenzy_in_progress, setMatchingFrenzyInProgress] = useState<boolean>(false);
  const [connective_revision_in_progress, setConnectiveRevisionInProgress] = useState<boolean>(false);
  const [listening_practice_in_progress, setListeningPracticeInProgress] = useState<boolean>(false);

  const [disable_user_tap, setDisableUserTap] = useState<boolean>(false);

  const [show_remove_fav_prompt, setShowRemoceFavPrompt] = useState(false);

  // 010_user_configurable_anwered_timeout
  const [LISTENING_PRACTICE_ANWERED_WAIT_S, setListeningPracticeAnswerWait_s] = useState<number>(1);
  const [MATCHING_FRENZY_ANWERED_WAIT_S, setMatchingFrenzyAnswerWait_s] = useState<number>(1);

  //
  const [WRONG_ANS_TOAST_APPEAR_TIMEOUT_S, setWRONG_ANS_TOAST_APPEAR_TIMEOUT_S] = useState<number>(3);
  const [CORRECT_ANS_TOAST_APPEAR_TIMEOUT_S, setCORRECT_ANS_TOAST_APPEAR_TIMEOUT_S] = useState<number>(3);
  const [CONNECTIVES_REVISION_ANWERED_WAIT_S, setCONNECTIVES_REVISION_ANWERED_WAIT_S] = useState<number>(3);

  // user_config.json
  // 012_put_matching_frenzy_count_down_time_to_config_file
  const [user_config_json, setUserConfigJson] = useState<any>({});

  // TODO: resume to 120
  const [MATCHING_FRENZY_COUNT_DOWN_S, setMATCHING_FRENZY_COUNT_DOWN_S] = useState<number>(300);
  useEffect(() => {
    fetch('/data/user_config.json')
      .then((res) => res.json())
      .then((res_json) => {
        setUserConfigJson(res_json);

        setMATCHING_FRENZY_COUNT_DOWN_S(res_json['matching_frenzy_count_down_s']);

        setListeningPracticeAnswerWait_s(res_json['listening_practice_anwered_wait_s']);
        setMatchingFrenzyAnswerWait_s(res_json['matching_frenzy_anwered_wait_s']);
        setCONNECTIVES_REVISION_ANWERED_WAIT_S(res_json['connectives_revision_anwered_wait_s']);
        // console.log({ res_json });

        setWRONG_ANS_TOAST_APPEAR_TIMEOUT_S(res_json['WRONG_ANS_TOAST_APPEAR_TIMEOUT_S']);
        setCORRECT_ANS_TOAST_APPEAR_TIMEOUT_S(res_json['CORRECT_ANS_TOAST_APPEAR_TIMEOUT_S']);
      });
  }, []);

  return (
    <AppStateContext.Provider
      value={{
        my_context,
        setMyContext,
        //
        tab_active,
        setTabActive,
        //
        listening_practice_in_progress,
        setListeningPracticeInProgress,
        //
        matching_frenzy_in_progress,
        setMatchingFrenzyInProgress,
        //
        connective_revision_in_progress,
        setConnectiveRevisionInProgress,
        //
        show_confirm_user_exit,
        setShowConfirmUserExit: useShowConfirmUserExit,
        //
        url_push_after_user_confirm,
        setURLPushAfterUserConfirm,
        //
        disable_user_tap,
        setDisableUserTap,
        //
        show_remove_fav_prompt,
        setShowRemoceFavPrompt,
        //
        // 012_put_matching_frenzy_count_down_time_to_config_file
        MATCHING_FRENZY_COUNT_DOWN_S,
        //
        LISTENING_PRACTICE_ANWERED_WAIT_S,
        MATCHING_FRENZY_ANWERED_WAIT_S,
        CONNECTIVES_REVISION_ANWERED_WAIT_S,
        //
        WRONG_ANS_TOAST_APPEAR_TIMEOUT_S,
        CORRECT_ANS_TOAST_APPEAR_TIMEOUT_S,
      }}
    >
      {children}

      <RemoveFavoritePrompt open={show_remove_fav_prompt} setIsOpen={setShowRemoceFavPrompt} />
    </AppStateContext.Provider>
  );
};

export const useAppStateContext = (): AppStateContextProps => {
  const context = useContext(AppStateContext);
  if (!context) {
    throw new Error('useMyContext must be used within a MyProvider');
  }
  return context;
};

interface AppStateContextProps {
  my_context: string;
  setMyContext: React.Dispatch<React.SetStateAction<string>>;
  //
  listening_practice_in_progress: boolean;
  setListeningPracticeInProgress: React.Dispatch<React.SetStateAction<boolean>>;
  //
  //
  matching_frenzy_in_progress: boolean;
  setMatchingFrenzyInProgress: React.Dispatch<React.SetStateAction<boolean>>;
  //
  connective_revision_in_progress: boolean;
  setConnectiveRevisionInProgress: React.Dispatch<React.SetStateAction<boolean>>;
  //
  tab_active: string;
  setTabActive: React.Dispatch<React.SetStateAction<string>>;
  //
  show_confirm_user_exit: boolean;
  setShowConfirmUserExit: React.Dispatch<React.SetStateAction<boolean>>;
  //
  url_push_after_user_confirm: string;
  setURLPushAfterUserConfirm: React.Dispatch<React.SetStateAction<string>>;
  //
  disable_user_tap: boolean;
  setDisableUserTap: React.Dispatch<React.SetStateAction<boolean>>;
  //
  show_remove_fav_prompt: boolean;
  setShowRemoceFavPrompt: React.Dispatch<React.SetStateAction<boolean>>;
  //
  MATCHING_FRENZY_COUNT_DOWN_S: number;
  //
  LISTENING_PRACTICE_ANWERED_WAIT_S: number;
  MATCHING_FRENZY_ANWERED_WAIT_S: number;
  CONNECTIVES_REVISION_ANWERED_WAIT_S: number;
  //
  WRONG_ANS_TOAST_APPEAR_TIMEOUT_S: number;
  CORRECT_ANS_TOAST_APPEAR_TIMEOUT_S: number;
}