import { useEffect, useState } from 'react';
import { listConectivesRevisionContent } from '../../public_data';
import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar, useIonRouter } from '@ionic/react';
import { LoadingScreen } from '../../components/LoadingScreen';
import IConnectivesRevisionCategory from '../../interfaces/IConnectivesRevisionCategory';
import { COLOR_TEXT, CONNECTIVE_REVISION_LINK, QUIZ_MAIN_MENU_LINK } from '../../constants';
import { useMyIonQuizContext } from '../../contexts/MyIonQuiz';
import { ConnectiveRevisionAllResult } from '../../contexts/ConnectiveRevisionRanking';
import { useAppStateContext } from '../../contexts/AppState';

function ConnectiveRevisionSelectCategory() {
  const PAGE_TITLE = 'Connective Revision';
  const router = useIonRouter();

  let [loading, setLoading] = useState<boolean>(true);
  let [categories, setCategories] = useState<IConnectivesRevisionCategory[] | []>([]);
  let { setTabActive, setConnectiveRevisionInProgress } = useAppStateContext();

  useEffect(() => {
    listConectivesRevisionContent().then(res_json => {
      setCategories(res_json);
      setLoading(false);
    });
  }, []);

  let { loadConnectiveRevisionScoreBoard } = useMyIonQuizContext();
  let [scoreboard_meta, setScoreboardMeta] = useState<ConnectiveRevisionAllResult>();

  useEffect(() => {
    (async () => {
      let temp = await loadConnectiveRevisionScoreBoard();
      setScoreboardMeta(temp);
    })();

    setTabActive(QUIZ_MAIN_MENU_LINK);
  }, []);

  if (loading) return <LoadingScreen />;
  if (!scoreboard_meta) return <LoadingScreen />;

  return (
    <>
      <IonPage>
        <IonHeader className='ion-no-border'>
          <IonToolbar>
            <IonTitle>
              <div style={{ textAlign: 'center' }}>{PAGE_TITLE}</div>
            </IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent fullscreen>
          <IonHeader collapse='condense'>
            <IonToolbar>
              <IonTitle size='large' style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <div>{PAGE_TITLE}</div>
              </IonTitle>
            </IonToolbar>
          </IonHeader>

          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center'
            }}
          >
            <div style={{ margin: '1rem 0 1rem' }}>
              <div
                style={{
                  width: '50vw',
                  height: '30vw',
                  backgroundSize: 'cover',
                  backgroundImage: `url('/data/Lesson/images/quiz_connectives_revision.jpg')`,
                  borderRadius: '1rem'
                }}
              ></div>
            </div>
            <div>Question Bank</div>
            <div style={{ width: '80vw' }}>
              {categories
                .map(item => item.cat_name)
                .map((item_name, idx) => (
                  <div style={{ margin: '0.9rem 0 0.9rem' }} key={idx}>
                    <IonButton
                      color='dark'
                      fill='outline'
                      expand='block'
                      onClick={() => {
                        setConnectiveRevisionInProgress(true);
                        router.push(`${CONNECTIVE_REVISION_LINK}/r/${idx}`, 'none', 'replace');
                      }}
                    >
                      <div
                        style={{
                          display: 'flex',
                          flexDirection: 'row',
                          justifyContent: 'space-between',
                          width: '100%'
                        }}
                      >
                        <div>{item_name}</div>
                        <div>
                          {scoreboard_meta[idx.toString()] || 0}
                          {'%'}
                        </div>
                      </div>
                    </IonButton>
                  </div>
                ))}
            </div>
          </div>
        </IonContent>
      </IonPage>
    </>
  );
}

export default ConnectiveRevisionSelectCategory;
