import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useNavigation} from '@react-navigation/native';
import {NativeStackNavigationProp} from '@react-navigation/native-stack';
import {
  DocumentTaskDetail as DocumentTaskDetailType,
  JourneyTaskType,
  ProgressStatus,
} from '@modules/employeeLifecycle/interfaces';
import {useMarkTaskAsDone} from '@modules/employeeLifecycle/hooks';
import {RootStackParamList} from '@navigation/interfaces';
import {Screens} from '@shared/constants';

import {TaskDetailProps} from '../../interfaces';
import {BaseTaskDetail} from '../BaseTaskDetail';
import {DocumentItem} from './components/DocumentItem';
import {useDocumentTaskFiles} from './hooks/useDocumentTaskFiles';
import {styles} from './styles';

const EMPTY_DOCUMENT_NAMES: DocumentTaskDetailType['task']['documentNames'] =
  [];
const EMPTY_DOCUMENTS: DocumentTaskDetailType['taskInfo']['documents'] = [];

export function DocumentTaskDetail({
  task,
  source,
  isUpdatingTask,
  ...rest
}: TaskDetailProps) {
  const {t} = useTranslation();
  const navigation =
    useNavigation<NativeStackNavigationProp<RootStackParamList>>();

  const documentTask = task as DocumentTaskDetailType;
  const isReadOnly = documentTask.status === ProgressStatus.DONE;
  const documentsName = documentTask.task.documentNames ?? EMPTY_DOCUMENT_NAMES;
  const documents = documentTask.taskInfo.documents ?? EMPTY_DOCUMENTS;

  const {markAsDone, isLoadingMarkAsDone} = useMarkTaskAsDone(task, source, {
    showSuccessSnackbar: true,
  });

  const onCompleteDocuments = (uploadedDocuments: {fileAssetId: number}[]) => {
    markAsDone({
      taskId: documentTask.id,
      data: {
        type: JourneyTaskType.DOCUMENT,
        documents: uploadedDocuments,
      },
    });
  };

  const {
    hasUploadingDocuments,
    shouldShowValidationErrors,
    uploadedFilesByIndex,
    onPickFiles,
    onDeleteFile,
    onComplete,
  } = useDocumentTaskFiles({
    documentsName,
    documents,
    isReadOnly,
    onCompleteDocuments,
  });

  const onSeeInMyDocuments = () => {
    navigation.navigate(Screens.DOCUMENTS_FILES, {
      folderId: documentTask.task.targetFolderId,
    });
  };

  return (
    <BaseTaskDetail
      {...rest}
      task={task}
      isUpdatingTask={isUpdatingTask || isLoadingMarkAsDone}
      pendingAction={{
        text: t('employee_lifecycle.custom_task_detail.mark_as_completed'),
        onPress: onComplete,
        disabled: hasUploadingDocuments,
      }}
      completedAction={{
        text: t('employee_lifecycle.document_task_detail.see_in_my_documents'),
        onPress: onSeeInMyDocuments,
      }}>
      <View style={styles.documentsContainer}>
        {documentsName.map((documentName, i) => (
          <DocumentItem
            key={`${documentName}-${i}`}
            label={documentName}
            description={
              documents[i]
                ? `${documents[i].documentName} - ${documents[i].size}`
                : undefined
            }
            files={uploadedFilesByIndex[i] || []}
            submitted={shouldShowValidationErrors}
            isReadOnly={isReadOnly}
            onPickFiles={files => onPickFiles(i, files)}
            onDeleteFile={fileId => onDeleteFile(i, fileId)}
          />
        ))}
      </View>
    </BaseTaskDetail>
  );
}