import { IonButton, useIonRouter } from '@ionic/react';
import './Lesson.css';
import { useEffect, useState } from 'react';
import { listLessonCategories } from '../../public_data';
import { LoadingScreen } from '../../components/LoadingScreen';
import { getLessonVocabularyLink } from './getLessonWordLink';
import { useMyIonStore } from '../../contexts/MyIonStore';
import EndOfList from './EndOfList';

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

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

  useEffect(() => {
    if (loading) return;

    let selected_category = lesson_contents[active_lesson_idx];
    setSelectedContent(selected_category['content']);
  }, [active_lesson_idx, loading]);

  if (loading) return <LoadingScreen />;

  return (
    <>
      <div>Connectives ?</div>
      <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
        {selected_content.map((content: any, cat_idx: number) => (
          <>
            <IonButton
              style={{ width: '45vw', height: '45vw' }}
              fill='clear'
              onClick={() => {
                router.push(
                  getLessonVocabularyLink(active_lesson_idx.toString(), cat_idx.toString(), '0'),
                  undefined,
                  'replace'
                );
              }}
            >
              <div>
                <div
                  key={cat_idx}
                  style={{
                    width: '100px',
                    height: '100px',
                    backgroundImage: `url(${content.cat_image})`,
                    backgroundPosition: 'center',
                    backgroundSize: 'cover',
                    borderRadius: '0.5rem',
                    margin: '.5rem'
                  }}
                ></div>
                {content.cat_name}
              </div>
            </IonButton>
          </>
        ))}
      </div>
      <EndOfList />
    </>
  );
};

export default ConnectivesContainer;
