import {
  IonContent,
  IonHeader,
  IonItem,
  IonList,
  IonPage,
  IonSelect,
  IonSelectOption,
  IonTitle,
  IonToolbar
} from '@ionic/react';
import './Lesson.css';
import { useEffect, useState } from 'react';
import { listLessonCategories } from '../../public_data';
import { LoadingScreen } from '../../components/LoadingScreen';
import { useMyIonStore } from '../../contexts/MyIonStore';
import LessonContainer from './LessonContainer';
import CongratGenius from '../../components/Modal/Congratulation/Genius';
import CongratHardworker from '../../components/Modal/Congratulation/Hardworker';
import CongratListeningProgress from '../../components/Modal/Congratulation/ListeningProgress';
import CongratMatchmaking from '../../components/Modal/Congratulation/Matchmaking';
import CongratConnectiveConqueror from '../../components/Modal/Congratulation/ConnectiveConqueror';

const Lesson: React.FC = () => {
  let [loading, setLoading] = useState<boolean>(true);
  let { lesson_contents: lesson_content, setLessonContent } = useMyIonStore();
  let [active_lesson_idx, setActiveLessonIdx] = useState<number>(0);
  let [selected_content, setSelectedContent] = useState<any>([]);

  useEffect(() => {
    listLessonCategories().then((cats: any) => {
      console.log({ cats });
      setLessonContent(cats);
      setActiveLessonIdx(0);
      setLoading(false);
    });
  }, []);

  useEffect(() => {
    if (loading) return;
    console.log('active_category changed', active_lesson_idx);
    let selected_category = lesson_content[active_lesson_idx];
    setSelectedContent(selected_category['content']);
  }, [active_lesson_idx, loading]);

  if (loading) return <LoadingScreen />;

  return (
    <IonPage>
      <IonHeader className='ion-no-border'>
        <IonToolbar>
          <IonTitle>
            <div>{'Lesson'}</div>
          </IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse='condense'>
          <IonToolbar>
            <IonTitle size='large' style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
              <div>{'Lesson'}</div>
            </IonTitle>
          </IonToolbar>
        </IonHeader>
        <div
          style={{
            width: '100%',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center'
          }}
        >
          <IonList lines='none'>
            <IonItem>
              <IonSelect value={active_lesson_idx} onIonChange={e => setActiveLessonIdx(e.detail.value)}>
                {lesson_content.map((category: any, idx: number) => (
                  <IonSelectOption key={idx} value={idx}>
                    {category.name}
                  </IonSelectOption>
                ))}
              </IonSelect>
            </IonItem>
          </IonList>
        </div>
        <LessonContainer test_active_lesson_idx={active_lesson_idx} />
        {/*  */}
        <CongratGenius />
        <CongratHardworker />
        <CongratListeningProgress />
        <CongratMatchmaking />
        <CongratConnectiveConqueror />
      </IonContent>
    </IonPage>
  );
};

export default Lesson;
