import React, {useState} from 'react';
import {ScrollView, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {useMutation, useQueryClient} from '@tanstack/react-query';
import AutoHeightImage from 'react-native-auto-height-image';
import {Typography, Button, ListItem, CardContainer} from '@components';
import {Navigation} from '@interfaces/navigation';
import LessonHeader from '@modules/learning/components/LessonHeader';
import {signCompliance} from '@modules/learning/services';
import {QUERY_KEYS} from '@modules/learning/constants';
import {useCourseNavigation} from '@modules/learning/hooks';
import {useAppSelector} from '@redux/utils';
import {uploadDigitalSignature} from '@services/multimedia';
import {Screens, windowDimensions} from '@shared/constants';
import {SPACING, useTheme} from '@shared/theme';
import {getCompleteName} from '@shared/utils';
import {ERROR} from '@shared/strings';
import {commonStyles} from '@shared/styles';

import {styles} from './styles';
import DigitalSignatureModal from './components/DigitalSignatureModal';
import SignBottomModal from './components/SignBottomModal';

// Define Hugo screen mapping
const SCREENS = {
  [Screens.COURSE]: 'Course',
  [Screens.MODULE_END]: 'ModuleEnd',
};

function SignCompliance({
  navigation,
  route: {params},
}: Navigation<Screens.SIGN_COMPLIANCE>) {
  const {theme} = useTheme();
  const {t} = useTranslation();
  const {firstName, lastName, profilePicture} = useAppSelector(
    ({user}) => user,
  );
  const queryClient = useQueryClient();
  const {course, exitToCourse} = useCourseNavigation();
  const {top, bottom} = useSafeAreaInsets();
  const [value, setValue] = useState('');
  const [isVisible, setIsVisible] = useState(false);
  const [isBackModalVisible, setIsBackModalVisible] = useState(false);
  const [loading, setLoading] = useState(false);
  const userName = getCompleteName({firstName, lastName});

  const {mutate: sendSignature, isPending: signLoading} = useMutation({
    mutationFn: signCompliance,
    onSuccess: () => {
      navigation.replace(SCREENS[Screens.MODULE_END] as any, params);
      queryClient.invalidateQueries({
        queryKey: [QUERY_KEYS.allCourses],
      });
      queryClient.invalidateQueries({
        queryKey: [QUERY_KEYS.learning],
      });
    },
    onSettled: () => setLoading(false),
  });

  const onAccept = async () => {
    setLoading(true);
    const signatureUrl = await uploadDigitalSignature(value);
    signatureUrl !== ERROR &&
      sendSignature({id: params.courseId, signatureUrl});
  };
  const showModal = () => setIsVisible(true);
  const onClose = () => setIsVisible(false);
  const onOk = (signature: string) => {
    setValue(signature);
    onClose();
  };
  const onDelete = () => {
    setValue('');
    onClose();
  };

  const showBackModal = () => setIsBackModalVisible(true);
  const hideBackModal = () => setIsBackModalVisible(false);
  const goBack = () => {
    exitToCourse(params.courseId);
    hideBackModal();
  };

  return (
    <View
      style={[
        commonStyles.flex,
        {
          paddingTop: top,
          paddingBottom: bottom + SPACING.x2,
          backgroundColor: theme.background.layout.tertiary,
        },
      ]}>
      <LessonHeader
        title={t('learning.course.lesson.almost_finished')}
        onClose={showBackModal}
        hideProgressBar
      />
      <ScrollView
        bounces={false}
        showsVerticalScrollIndicator={false}
        contentContainerStyle={styles.innerContainer}>
        <ListItem
          avatar={{
            url: profilePicture || undefined,
            name: userName,
            size: 'md',
          }}
          title={userName}
          style={styles.avatarContainer}
        />
        <Typography style={styles.body}>
          {t('learning.course.signature.pending_description', {
            course: course?.title,
          })}
        </Typography>
        <Typography style={styles.body} weight="semiBold">
          {t('learning.course.signature.sign_next')}
        </Typography>

        {value ? (
          <CardContainer
            footer={{
              primaryText: t('general.modify'),
              primaryVariant: 'secondary',
              onPrimaryPress: showModal,
              secondaryText: t('general.clear'),
              onSecondaryPress: onDelete,
            }}
            style={styles.cardContainer}>
            <AutoHeightImage
              source={{uri: value}}
              resizeMode="contain"
              width={windowDimensions.width * 0.4}
            />
          </CardContainer>
        ) : (
          <Button
            style={[styles.button, styles.buttonContainer]}
            onPress={showModal}
            text={t('learning.course.signature.add_sign')}
          />
        )}
        <DigitalSignatureModal
          value={value}
          visible={isVisible}
          onClose={onClose}
          onOk={onOk}
          loading={signLoading}
        />
      </ScrollView>
      {value && (
        <Button
          text={t('general.finish')}
          onPress={onAccept}
          style={styles.commonMargin}
          isLoading={signLoading || loading}
          disabled={signLoading || loading}
        />
      )}
      <SignBottomModal
        isVisible={isBackModalVisible}
        onClose={hideBackModal}
        onExit={goBack}
      />
    </View>
  );
}

export default SignCompliance;