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

import { listQuizListeningPracticeContent } from '../../public_data/index';
import { useEffect, useState } from 'react';
import { LoadingScreen } from '../../components/LoadingScreen';
import IListeningPracticeCategory from '../../interfaces/IListeningPracticeCategory';
import { COLOR_TEXT, LISTENING_PRACTICE_LINK, QUIZ_MAIN_MENU_LINK } from '../../constants';
import { useAppStateContext } from '../../contexts/AppState';

const ListeningPractice: React.FC = () => {
  let [loading, setLoading] = useState<boolean>(true);
  let [categories, setCategories] = useState<IListeningPracticeCategory[] | []>([]);
  let { show_confirm_user_exit, setShowConfirmUserExit, setTabActive } = useAppStateContext();

  useEffect(() => {
    listQuizListeningPracticeContent().then(res_json => {
      setCategories(res_json);
      console.log({ res_json });
      setLoading(false);
    });
    setTabActive(QUIZ_MAIN_MENU_LINK);
  }, []);

  let { setListeningPracticeInProgress } = useAppStateContext();
  let router = useIonRouter();
  function startListeningPractice(idx: number) {
    let url = `${LISTENING_PRACTICE_LINK}/r/${idx}`;
    setListeningPracticeInProgress(true);
    router.push(url, 'none', 'replace');
  }

  let PAGE_TITLE = 'Listening Practice';

  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_listening_practice.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={{ marginTop: '1.5rem' }} key={idx}>
                  <IonButton
                    color={COLOR_TEXT}
                    style={{ color: COLOR_TEXT }}
                    fill='outline'
                    expand='block'
                    onClick={() => startListeningPractice(idx)}
                  >
                    {item_name}
                  </IonButton>
                </div>
              ))}
          </div>
        </div>
        {/*  */}
      </IonContent>
    </IonPage>
  );
};

export default ListeningPractice;
