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

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
            key={cat_idx}
            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;