import {
  IonContent,
  IonHeader,
  IonItem,
  IonList,
  IonPage,
  IonSelect,
  IonSelectOption,
  IonTitle,
  IonToolbar
} from '@ionic/react';
import { useEffect, useState } from 'react';
import { listLessonCategories } from '../../../public_data';
import { LoadingScreen } from '../../../components/LoadingScreen';
import { useMyIonStore } from '../../../contexts/MyIonStore';
import { useMyIonFavorite } from '../../../contexts/MyIonFavorite';
import Card from './Card';

const ListEmpty: 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]);

  let { myIonStoreLoadFavoriteVocabulary } = useMyIonFavorite();

  let [fav_list_len, setFavListLen] = useState<number>(0);
  let [fav_list, setFavList] = useState<any[] | []>([]);

  const [current_vocab, setCurrentVocab] = useState<any>({});
  const [current_fav_idx, setCurrentFavIdx] = useState<number>(0);
  function nextFavVocab() {
    setCurrentFavIdx(Math.min(current_fav_idx + 1, fav_list_len - 1));
  }
  function prevFavVocab() {
    setCurrentFavIdx(Math.max(current_fav_idx - 1, 0));
  }

  useEffect(() => {
    if (!fav_list) return;
    setCurrentVocab(fav_list[current_fav_idx]);
  }, [current_fav_idx]);

  useEffect(() => {
    setFavListLen(fav_list.length);
  }, [fav_list]);

  useEffect(() => {
    (async () => {
      let temp = await myIonStoreLoadFavoriteVocabulary();
      setFavList(temp);
    })();
  }, []);

  if (loading) return <LoadingScreen />;
  if (!fav_list || fav_list.length === 0) return <ListEmpty />;

  return (
    <IonPage>
      <IonHeader className='ion-no-border'>
        <IonToolbar>
          <IonTitle>
            <div>{'Favorite Vocabulary'}</div>
          </IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <div>list is empty</div>
      </IonContent>
    </IonPage>
  );
};

export default ListEmpty;
