import { useEffect, useState } from 'react';
import { listMatchingFrenzyContent } from '../../public_data';

import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar, useIonRouter } from '@ionic/react';

import { LoadingScreen } from '../../components/LoadingScreen';
import { MATCHING_FRENZY_LINK, QUIZ_MAIN_MENU_LINK } from '../../constants';
import IMatchingFrenzyCategory from '../../interfaces/IMatchingFrenzyCategory';
import { useAppStateContext } from '../../contexts/AppState';

function MatchingFrenzySelectCategory() {
  const PAGE_TITLE = 'Matching Frenzy';
  const router = useIonRouter();
  const [loading, setLoading] = useState<boolean>(true);
  const [categories, setCategories] = useState<IMatchingFrenzyCategory[] | []>([]);
  const { setTabActive } = useAppStateContext();

  useEffect(() => {
    listMatchingFrenzyContent().then(res_json => {
      setCategories(res_json);
      console.log({ res_json });
      setLoading(false);
    });

    setTabActive(QUIZ_MAIN_MENU_LINK);
  }, []);

  if (loading) 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_matching_frenzy.jpg')`,
                  borderRadius: '1rem'
                }}
              ></div>
            </div>
            <div>Choose the Chapter you want to revise</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'
                      // href={`${MATCHING_FRENZY_LINK}/r/${idx}`}
                      onClick={() => {
                        router.push(`${MATCHING_FRENZY_LINK}/r/${idx}`);
                      }}
                    >
                      {item_name}
                    </IonButton>
                  </div>
                ))}
            </div>
          </div>
        </IonContent>
      </IonPage>
    </>
  );
}

export default MatchingFrenzySelectCategory;
