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';
import { getLessonConnectivesLink } from './getLessonConnectivesLink';
import { COLOR_TEXT } from '../../constants';

let lessonLinkProxy = [getLessonVocabularyLink, getLessonConnectivesLink];

interface ContainerProps {
  test_active_lesson_idx: number;
}

const LessonContainer: React.FC<ContainerProps> = ({ test_active_lesson_idx = 1 }) => {
  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(test_active_lesson_idx);
      setLoading(false);
    });
  }, []);

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

  if (loading) return <LoadingScreen />;

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

export default LessonContainer;
