import React, {useEffect} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useMutation, useQueryClient} from '@tanstack/react-query';
import {shallowEqual} from 'react-redux';
import {IconCertificate} from '@tabler/icons-react-native';
import {Button, RenderSceneProps, Tabs} from '@components';
import {Navigation} from '@interfaces/navigation';
import CourseDetail from '@modules/learning/screens/Course/screens/CourseDetail';
import CourseContent from '@modules/learning/screens/Course/screens/CourseContent';
import {CourseStatus, TabDetails, Lesson} from '@modules/learning/interfaces';
import type {Course as CourseType} from '@modules/learning/interfaces';
import {useGetCourse} from '@modules/learning/hooks/useGetCourse';
import {initCourse} from '@modules/learning/services';
import {
  QUERY_KEYS,
  DETAIL_TAB_ROUTES,
  DELAY_TIME_SURVEY,
} from '@modules/learning/constants';
import {hasSurveyToComplete, isLockedLesson} from '@modules/learning/utils';
import useGetCertificate from '@modules/learning/hooks/useGetCertificate';
import CourseContentSk from '@modules/learning/screens/Course/screens/CourseContent/components/CourseContentSk';
import CourseDetailSk from '@modules/learning/screens/Course/screens/CourseDetail/components/CourseDetailSk';
import {useAppSelector} from '@redux/utils';
import {showSnackbar} from '@redux/dispatchers';
import {useTheme} from '@shared/theme';
import {AMPLITUDE_EVENTS, Screens} from '@shared/constants';
import {logAmplitudeEvent} from '@shared/utils';
import {useSafeAreaBottomPadding} from '@shared/hooks/useSafeAreaBottomPadding';
import {commonStyles} from '@shared/styles';

import {styles} from './styles';

function Course({
  navigation,
  route: {
    params: {courseId, q = ''},
  },
}: Navigation<Screens.COURSE>) {
  const {t} = useTranslation();
  const paddingBottom = useSafeAreaBottomPadding();
  const queryClient = useQueryClient();
  const {theme, spacing} = useTheme();
  const {userId, instanceId, openReason} = useAppSelector(
    ({instance, app, user}) => ({
      userId: user.id,
      instanceId: instance.id,
      openReason: app.openReason,
    }),
    shallowEqual,
  );
  const {
    data,
    isLoading,
    isNewCourse,
    startCourse,
    goToSelectedLesson,
    isFinished,
    isSignaturePending,
    goToSignCompliance,
  } = useGetCourse(courseId);
  const issueCertificate = !!(data?.passed && data?.issueCertificate);

  useEffect(() => {
    if (data?.title) {
      navigation.setOptions({
        title: data?.title,
      });
    }
  }, [navigation, data?.title]);

  const hasToCompleteSurvey = hasSurveyToComplete(data);

  useEffect(() => {
    if (data && data.learningPathIds.length === 0 && hasToCompleteSurvey) {
      const timeoutId = setTimeout(
        () =>
          navigation.navigate(Screens.SATISFACTION_SURVEY, {courseId: data.id}),
        DELAY_TIME_SURVEY,
      );

      return () => clearTimeout(timeoutId);
    }
  }, [data, hasToCompleteSurvey, navigation]);

  const {mutate, isPending: isStartCourseLoading} = useMutation({
    mutationFn: initCourse,
    onSuccess: (_, variables) => {
      queryClient.invalidateQueries({
        queryKey: QUERY_KEYS.courses({type: CourseStatus.PENDING, q}),
      });
      queryClient.invalidateQueries({
        queryKey: QUERY_KEYS.courses({type: CourseStatus.IN_PROGRESS, q}),
      });
      variables?.lesson ? goToSelectedLesson(variables?.lesson) : startCourse();
    },
  });

  const {getCertificate, isLoading: certificateLoading} = useGetCertificate({
    id: courseId,
    title: data?.title,
    type: 'course',
    data,
  });

  const onLessonPress = (lesson: Nullable<Lesson>) => {
    if (
      data?.isSequential &&
      !isFinished &&
      lesson &&
      isLockedLesson({
        lesson,
        modules: data.modules,
        isCourseFinished: !!isFinished,
        isSequential: data.isSequential,
      })
    ) {
      showSnackbar({
        title: t('learning.course.lesson.blocked'),
        description: t('learning.course.lesson.blocked_description'),
        variant: 'info',
      });
    } else {
      isNewCourse ? mutate({id: courseId, lesson}) : goToSelectedLesson(lesson);
    }
  };

  const onButtonPress = () => {
    isNewCourse
      ? mutate({id: courseId})
      : isSignaturePending
      ? goToSignCompliance()
      : isFinished
      ? goToSelectedLesson(null)
      : startCourse();
  };

  useEffect(() => {
    logAmplitudeEvent(AMPLITUDE_EVENTS.COURSE_DETAILS_VIEWED, {
      userId,
      instanceId,
      courseId,
      openReason,
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const renderScene = (key: string, course: CourseType) => {
    switch (key) {
      case TabDetails.Detail:
        return (
          <CourseDetail {...course} goToSignCompliance={goToSignCompliance} />
        );
      case TabDetails.Content:
        return (
          <CourseContent
            {...course}
            onLessonPress={onLessonPress}
            isFinished={isFinished}
          />
        );
      default:
        return null;
    }
  };

  const generalRenderScene = ({route: {key}}: RenderSceneProps) => {
    if (isLoading) {
      return key === TabDetails.Detail ? (
        <CourseDetailSk />
      ) : (
        <CourseContentSk />
      );
    }

    return (
      <View
        style={[
          commonStyles.flex,
          {backgroundColor: theme.background.layout.default},
        ]}>
        {data && renderScene(key, data)}
      </View>
    );
  };

  const showButtons =
    !isLoading && (issueCertificate || !!data?.modules?.length);

  return (
    <View style={commonStyles.flex}>
      <Tabs routes={DETAIL_TAB_ROUTES} renderScene={generalRenderScene} lazy />
      {showButtons && (
        <View
          style={[
            styles.buttonContainer,
            {
              backgroundColor: theme.background.layout.tertiary,
              paddingBottom: paddingBottom + spacing.x2,
              shadowColor: theme.shadow.inverted,
            },
          ]}>
          {issueCertificate && (
            <Button
              IconLeft={IconCertificate}
              variant="primary"
              text={t('learning.common.view_certificate')}
              onPress={getCertificate}
              style={styles.button}
              isLoading={certificateLoading}
            />
          )}
          {!!data?.modules?.length && (
            <Button
              variant={issueCertificate ? 'secondary' : 'primary'}
              text={t(
                isSignaturePending
                  ? 'learning.course.signature.sign_now'
                  : isFinished
                  ? 'learning.course.view'
                  : isNewCourse
                  ? 'general.start'
                  : 'general.continue',
              )}
              onPress={onButtonPress}
              style={styles.button}
              isLoading={isLoading || isStartCourseLoading}
            />
          )}
        </View>
      )}
    </View>
  );
}

export default Course;