import {useTranslation} from 'react-i18next';
import {
  useMarkTaskAsDone,
  useReopenTask,
} from '@modules/employeeLifecycle/hooks';

import {TaskDetailProps} from '../../interfaces';
import {BaseTaskDetail} from '../BaseTaskDetail';

export function CustomTaskDetail({
  task,
  source,
  isUpdatingTask,
  ...rest
}: TaskDetailProps) {
  const {t} = useTranslation();

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

  const {reopenTask, isLoadingReopenTask} = useReopenTask(task, source);

  const onMarkAsDone = () => {
    markAsDone({taskId: task.id});
  };

  const onReopenTask = () => {
    reopenTask(task.id);
  };

  return (
    <BaseTaskDetail
      {...rest}
      task={task}
      isUpdatingTask={
        isUpdatingTask || isLoadingMarkAsDone || isLoadingReopenTask
      }
      pendingAction={{
        text: t('employee_lifecycle.custom_task_detail.mark_as_completed'),
        onPress: onMarkAsDone,
      }}
      completedAction={{
        text: t('employee_lifecycle.custom_task_detail.reopen_task'),
        onPress: onReopenTask,
      }}
    />
  );
}