import {
  IonApp,
  IonBackdrop,
  IonIcon,
  IonLabel,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs,
  setupIonicReact,
  useIonRouter
} from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { bookOutline, bug, newspaperOutline, settingsOutline, square, trophyOutline } from 'ionicons/icons';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/**
 * Ionic Dark Mode
 * -----------------------------------------------------
 * For more info, please see:
 * https://ionicframework.com/docs/theming/dark-mode
 */

/* import '@ionic/react/css/palettes/dark.always.css'; */
/* import '@ionic/react/css/palettes/dark.class.css'; */
// import '@ionic/react/css/palettes/dark.system.css';

/* Theme variables */
import './theme/variables.css';
import { RouteConfig } from './RouteConfig';
//
import { DEBUG, DEBUG_LINK, LESSON_LINK, QUIZ_MAIN_MENU_LINK, RECORD_LINK, SETTING_LINK } from './constants';
import ContextMeta from './contexts';
import { useAppStateContext } from './contexts/AppState';
import ConfirmUserExit from './components/ConfirmUserExit';

import './debug.css';
import './style.css';

let active_color = 'tomato';
let inactive_color = 'gray';

setupIonicReact();

const TabButtons: React.FC = () => {
  let router = useIonRouter();

  let {
    url_push_after_user_confirm,
    setURLPushAfterUserConfirm,
    setShowConfirmUserExit,
    listening_practice_in_progress,
    setListeningPracticeInProgress,
    matching_frenzy_in_progress,
    connective_revision_in_progress,
    tab_active,
    setTabActive
  } = useAppStateContext();
  function goSwitchPage(url: string) {
    if (listening_practice_in_progress || matching_frenzy_in_progress || connective_revision_in_progress) {
      if (url != QUIZ_MAIN_MENU_LINK) {
        setURLPushAfterUserConfirm(url);
        setShowConfirmUserExit(true);
      }
    } else {
      setTabActive(url);
      router.push(url, 'none', 'replace');
    }
  }

  return (
    <IonTabBar slot='bottom'>
      <IonTabButton
        tab='lesson'
        onClick={() => goSwitchPage(LESSON_LINK)}
        style={{ color: tab_active == LESSON_LINK ? active_color : inactive_color }}
      >
        <IonIcon aria-hidden='true' icon={bookOutline} />
        <IonLabel>{'Lesson'}</IonLabel>
      </IonTabButton>
      {/*  */}
      <IonTabButton
        tab='quiz'
        onClick={() => goSwitchPage(QUIZ_MAIN_MENU_LINK)}
        style={{ color: tab_active == QUIZ_MAIN_MENU_LINK ? active_color : inactive_color }}
      >
        <IonIcon aria-hidden='true' icon={newspaperOutline} />
        <IonLabel>{'Quiz'}</IonLabel>
      </IonTabButton>
      {/*  */}
      <IonTabButton
        tab='record'
        onClick={() => goSwitchPage(RECORD_LINK)}
        style={{ color: tab_active == RECORD_LINK ? active_color : inactive_color }}
      >
        <IonIcon aria-hidden='true' icon={trophyOutline} />
        <IonLabel>{'Record'}</IonLabel>
      </IonTabButton>
      {/*  */}
      <IonTabButton
        tab='setting'
        onClick={() => goSwitchPage(SETTING_LINK)}
        style={{ color: tab_active == SETTING_LINK ? active_color : inactive_color }}
      >
        <IonIcon aria-hidden='true' icon={settingsOutline} />
        <IonLabel>{'Setting'}</IonLabel>
      </IonTabButton>
      {DEBUG ? (
        <IonTabButton
          tab='debug'
          onClick={() => goSwitchPage(DEBUG_LINK)}
          // href={DEBUG_LINK}
        >
          <IonIcon aria-hidden='true' icon={bug} color='danger' />
          <IonLabel color='danger'>Debug</IonLabel>
        </IonTabButton>
      ) : (
        <></>
      )}
    </IonTabBar>
  );
};

function DisableUserTap({ children }: { children: React.ReactNode }) {
  const { disable_user_tap } = useAppStateContext();
  return (
    <>
      {disable_user_tap ? <IonBackdrop visible={true}></IonBackdrop> : null}
      {children}
    </>
  );
}

const App: React.FC = () => {
  return (
    <IonApp>
      <ContextMeta>
        <DisableUserTap>
          <IonReactRouter>
            <IonTabs>
              <IonRouterOutlet>
                <RouteConfig />
              </IonRouterOutlet>
              <TabButtons />
            </IonTabs>
            {/*  */}
            <ConfirmUserExit />
            {/*  */}
          </IonReactRouter>
        </DisableUserTap>
      </ContextMeta>
    </IonApp>
  );
};

export default App;
