import React, {useState, useEffect} from 'react';
import {Pressable, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useQuery, useQueryClient} from '@tanstack/react-query';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {IconCircleCheck, IconMinimize} from '@tabler/icons-react-native';
import {
  CardContainer,
  IconButton,
  Spinner,
  Checkbox,
  Typography,
} from '@components';
import {ApiErrors} from '@config/api';
import {useBackHandler} from '@hooks/useBackHandler';
import {useLandscapeMode} from '@hooks/useLandscapeMode';
import {useDeviceOrientation} from '@hooks/useDeviceOrientation';
import {Navigation} from '@interfaces/navigation';
import Footer from '@modules/learning/components/Footer';
import {
  getProgress,
  getModuleByLessonId,
  getStepStatus,
  isActiveLesson,
  isPdfFile,
} from '@modules/learning/utils';
import {
  Lesson,
  LessonStatus,
  LessonType,
  LessonsProps,
} from '@modules/learning/interfaces';
import LessonArticle from '@modules/learning/screens/Lesson/screens/LessonArticle/index';
import LessonVideo from '@modules/learning/screens/Lesson/screens/LessonVideo';
import LessonReading from '@modules/learning/screens/Lesson/screens/LessonReading';
import LessonScorm from '@modules/learning/screens/Lesson/screens/LessonScorm';
import {useCourseNavigation, useFinishLesson} from '@modules/learning/hooks';
import {getLesson, scormStatus} from '@modules/learning/services';
import {QUERY_KEYS} from '@modules/learning/constants';
import LessonHeader from '@modules/learning/components/LessonHeader';
import {showSnackbar} from '@redux/dispatchers';
import {OrientationValue, isAndroid} from '@shared/utils';
import {Screens} from '@shared/constants';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

function CourseLessons({
  route: {
    params: {courseId, lessonId, lessonTag},
  },
}: Navigation<Screens.COURSE_LESSONS>) {
  const queryClient = useQueryClient();
  const {top, bottom} = useSafeAreaInsets();
  const {theme, iconSizes} = useTheme();
  const {t} = useTranslation();
  const {course, onNextLesson, onPreviousLesson, exitToCourse} =
    useCourseNavigation();
  const {data: lesson, isLoading: isLoadingLesson} = useQuery({
    queryKey: QUERY_KEYS.lesson(lessonId, lessonTag),
    queryFn: () => getLesson<Lesson>({id: lessonId, tag: lessonTag}),
  });
  const module = course && getModuleByLessonId(course, lessonId);

  const [isChecked, setIsChecked] = useState<boolean>(false);
  const [isCheckDisabled, setIsCheckDisabled] = useState<boolean>(false);
  const [isFullScreen, setIsFullScreen] = useState(false);
  const [isRotated, setIsRotated] = useState(false);

  const {currentStep, totalSteps} = getStepStatus(lessonId, module);
  const isFinished = !isActiveLesson(lesson?.status as LessonStatus);

  const progress = getProgress(lessonId, module);

  const onOrientationChange = (
    orientation: OrientationValue,
    newOrientation: OrientationValue,
  ) =>
    setIsRotated(
      newOrientation.startsWith('LANDSCAPE') ||
        newOrientation === 'PORTRAIT-UPSIDEDOWN' ||
        (orientation.startsWith('LANDSCAPE') &&
          (newOrientation.startsWith('FACE') || newOrientation === 'UNKNOWN')),
    );

  useDeviceOrientation(onOrientationChange);
  useLandscapeMode(isFullScreen);

  useEffect(() => {
    if (
      lesson?.type === LessonType.Video ||
      (lesson?.type === LessonType.Reading && isPdfFile(lesson?.url))
    ) {
      setIsCheckDisabled(true);
    } else {
      setIsCheckDisabled(false);
    }
  }, [module, lesson]);

  const onRefetchScorm = async () => {
    if (!isFinished && lesson?.type === LessonType.Scorm) {
      const response = await scormStatus({id: lessonId, tag: lessonTag});
      if (
        response &&
        [LessonStatus.FINISHED_OK, LessonStatus.FINISHED_FAIL].includes(
          response.status,
        )
      ) {
        queryClient.invalidateQueries({
          queryKey: QUERY_KEYS.lesson(lessonId, lessonTag),
        });
        queryClient.invalidateQueries({queryKey: QUERY_KEYS.course(courseId)});
      }
    }
  };

  const {sendLessonCompletion, isLoading: isSendingEvaluation} =
    useFinishLesson({
      id: lessonId,
      tag: lessonTag,
      type: lesson?.type,
      onSuccess: () => onNextLesson(lessonId),
      onError: error => {
        if (error.code === ApiErrors.COURSE_TASK_NOT_IN_PROGRESS) {
          onNextLesson(lessonId);
        }
      },
    });

  const onNextPress = () => {
    onRefetchScorm();
    if (
      isFinished ||
      (!course?.isSequential && !isChecked) ||
      lesson?.type === LessonType.Scorm
    ) {
      onNextLesson(lessonId);
      return;
    }

    sendLessonCompletion();
  };

  const renderCheckbox = (
    options: Parameters<LessonsProps['renderCheckbox']>[0],
  ) => {
    const onCheck = () => {
      if (
        options?.tooltip &&
        !(isFinished || isChecked) &&
        (isFinished || options?.disabled)
      ) {
        showSnackbar({
          title: options?.tooltip,
        });
        return false;
      }

      if (isCheckDisabled) {
        !isChecked &&
          showSnackbar({
            title: t('learning.course.lesson.finish_lesson_before_proceed'),
          });
        return false;
      }

      if (options?.onPress) {
        options?.onPress(isFinished || isChecked);
      } else {
        onCheckPress();
      }
    };

    return !isFullScreen ? (
      <View style={styles.labelContainer}>
        <CardContainer
          style={[
            {backgroundColor: theme.background.elements.grey},
            styles.cardContainer,
          ]}>
          {!isFinished ? (
            <Checkbox
              style={styles.checkbox}
              checked={isChecked}
              onPress={onCheck}
              disabled={isCheckDisabled}
            />
          ) : (
            <View
              style={[
                styles.checkIconContainer,
                {backgroundColor: theme.background.elements.overlay},
              ]}>
              <IconCircleCheck
                size={iconSizes.x5}
                color={theme.text.neutral.default}
              />
            </View>
          )}
          <Pressable style={styles.flex} onPress={onCheck}>
            <Typography weight="semiBold" variant="xs">
              {t(
                isFinished
                  ? 'learning.course.lesson.mark_lesson_continue'
                  : 'learning.course.lesson.mark_as_finished',
              )}
            </Typography>
          </Pressable>
        </CardContainer>
      </View>
    ) : null;
  };

  const renderLesson = () => {
    if (!lesson) {
      return;
    }

    const lessonProps = {
      isSequential: course?.isSequential,
      setIsChecked: setIsChecked,
      renderCheckbox: renderCheckbox,
      isFullScreen,
      isRotated,
    };

    switch (lesson.type) {
      case LessonType.Lesson:
        return <LessonArticle lesson={lesson} {...lessonProps} />;
      case LessonType.Reading:
        return <LessonReading lesson={lesson} {...lessonProps} />;
      case LessonType.Scorm:
        return <LessonScorm lesson={lesson} {...lessonProps} />;
      case LessonType.Video:
        return <LessonVideo lesson={lesson} {...lessonProps} />;
      default:
        return null;
    }
  };

  const onCheckPress = () => setIsChecked(prev => !prev);

  const onClose = () => {
    onRefetchScorm();
    exitToCourse(courseId);
  };

  const onBack = () => {
    onRefetchScorm();
    onPreviousLesson();
    return true;
  };

  const onFullScreen = () => setIsFullScreen(true);
  const onNormalScreen = () => setIsFullScreen(false);

  useBackHandler(onBack);

  const containerStyle = {
    paddingTop: top,
    paddingBottom: isAndroid ? 0 : bottom,
    backgroundColor: theme.background.layout.tertiary,
  };

  return (
    <View style={[styles.container, containerStyle]}>
      {isLoadingLesson ? (
        <View style={styles.spinner}>
          <Spinner />
        </View>
      ) : (
        <>
          {!isFullScreen && (
            <LessonHeader
              title={module?.title}
              type={lesson?.type}
              onClose={onClose}
              onFullScreen={onFullScreen}
              progress={progress}
            />
          )}
          <View
            style={[
              styles.flex,
              isRotated && isFullScreen && styles.rotatedContainer,
            ]}>
            {renderLesson()}
          </View>
          {!isFullScreen && (
            <Footer
              totalSteps={totalSteps}
              currentstep={currentStep}
              onBackPress={onBack}
              onNextPress={onNextPress}
              disableNext={!isChecked && !isFinished}
              forceEnableBack
              nextLoading={isSendingEvaluation}
            />
          )}
          {isFullScreen && (
            <IconButton
              variant="primary"
              onPress={onNormalScreen}
              size="lg"
              style={styles.absolute}
              Icon={IconMinimize}
            />
          )}
        </>
      )}
    </View>
  );
}

export default CourseLessons;