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

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>(LESSON_LINK);
  const [show_confirm_user_exit, useShowConfirmUserExit] = useState<boolean>(false);
  const [url_push_after_user_confirm, setURLPushAfterUserConfirm] = useState<string>(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);

  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
      }}
    >
      {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>>;
}
