import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {IconCertificate} from '@tabler/icons-react-native';
import {Button, Pill, Title, Typography} from '@components';
import {
  LearningSessionDetail,
  LearningSessionStatus,
  LearningSessionType,
} from '@modules/learning/interfaces';
import useGetCertificate from '@modules/learning/hooks/useGetCertificate';
import {SPACING, useTheme} from '@shared/theme';

import {styles} from './styles';

interface AssistanceFooterProps {
  isUpdatingAttendance: boolean;
  onConfirmAssistance: () => void;
  onJoinSession: () => void;
  data: LearningSessionDetail;
}

function AssistanceFooter({
  isUpdatingAttendance,
  onConfirmAssistance,
  onJoinSession,
  data,
}: AssistanceFooterProps) {
  const {
    meetingLink: hasLink,
    confirmedAssistance,
    type,
    status,
    address,
    isObligatory,
    issueCertificate,
    title,
    assisted,
    learningSessionId: id,
  } = data || {};
  const {theme} = useTheme();
  const {bottom} = useSafeAreaInsets();
  const {t} = useTranslation();
  const {getCertificate, isLoading: certificateLoading} = useGetCertificate({
    id,
    title,
    type: 'session',
    data,
  });

  const isVirtual = type === LearningSessionType.VIRTUAL;

  const started = status === LearningSessionStatus.IN_PROGRESS;

  const renderActionButton = () => {
    if (confirmedAssistance && !started) {
      return (
        <Pill
          size="md"
          variant="success"
          text={t('learning.session.attendance.confirmed')}
        />
      );
    }

    if (started && hasLink) {
      return (
        <Button
          isLoading={isUpdatingAttendance}
          variant="primary"
          onPress={onJoinSession}
          text={t('learning.session.attendance.join')}
          size="sm"
        />
      );
    }

    if (started && !hasLink) {
      return null;
    }

    if (!confirmedAssistance && !started) {
      return (
        <Button
          isLoading={isUpdatingAttendance}
          variant="primary"
          onPress={onConfirmAssistance}
          text={t('learning.session.attendance.confirmed')}
          size="sm"
        />
      );
    }
  };

  if (
    status === LearningSessionStatus.FINISHED &&
    !(issueCertificate && assisted)
  ) {
    return null;
  }

  return status === LearningSessionStatus.FINISHED &&
    issueCertificate &&
    assisted ? (
    <View
      style={[
        styles.container,
        {
          backgroundColor: theme.background.layout.tertiary,
          paddingBottom: bottom + SPACING.x1,
        },
      ]}>
      <Button
        IconLeft={IconCertificate}
        variant="primary"
        text={t('learning.common.view_certificate')}
        onPress={getCertificate}
        style={styles.button}
        isLoading={certificateLoading}
      />
    </View>
  ) : (
    <View
      style={[
        styles.container,
        styles.footer,
        {
          backgroundColor: theme.background.layout.tertiary,
          paddingBottom: bottom + SPACING.x1,
        },
        !isVirtual && hasLink && started && styles.row,
      ]}>
      <Title
        title={
          started
            ? isVirtual
              ? t('learning.session.status.live')
              : t('learning.session.status.started')
            : t('learning.session.attendance.title')
        }
        size="s"
        titleNumberOfLines={2}
        descriptionNumberOfLines={4}
        style={styles.title}
        description={
          started
            ? isVirtual
              ? t('learning.session.attendance.join_session')
              : `${t(
                  'learning.session.attendance.remember_that_it_is_presential_in',
                  {address},
                )}.`
            : t('learning.session.attendance.confirm_attendance')
        }
        {...(started &&
          isObligatory && {
            topText: t('learning.session.attendance.required'),
          })}
      />

      {!isVirtual && hasLink && started && (
        <Typography variant="xs" color={theme.text.neutral.lighter}>
          {t(
            'learning.session.attendance.remember_that_it_is_presential_in_description',
            {address},
          )}
        </Typography>
      )}

      {renderActionButton()}
    </View>
  );
}

export default AssistanceFooter;