import {
  IonButton,
  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';

interface ICardProps {
  current_vocab: any;
  current_fav_idx: number;
  nextFavVocab: () => void;
  prevFavVocab: () => void;
}

const Card: React.FC<ICardProps> = ({ current_vocab, current_fav_idx, nextFavVocab, prevFavVocab }) => {
  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, setFavList] = useState<any[] | undefined>(undefined);
  useEffect(() => {
    (async () => {
      let temp = await myIonStoreLoadFavoriteVocabulary();
      setFavList(temp);
    })();
  }, []);

  if (loading) return <LoadingScreen />;

  return (
    <div>
      {JSON.stringify(current_vocab)}
      {current_fav_idx}
      <IonButton onClick={prevFavVocab}>Prev</IonButton>
      <IonButton onClick={nextFavVocab}>Next</IonButton>
    </div>
  );
};

export default Card;
