import { useState } from 'react';

import { TableLoaderProps as HuTableLoaderProps } from '@material-hu/components/design-system/Table/components/TableLoader/types';

import {
  FilterChips,
  ItemsList,
} from 'src/pages/dashboard/employeeLifecycle/components';
import { JourneyTask } from 'src/pages/dashboard/employeeLifecycle/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { useFormatStepTasks } from '../../../hooks/useFormatStepTasks';
import { BlockedTaskWarning } from '../BlockedTaskWarning';

type PendingTasksTabProps = {
  tasks: JourneyTask[];
  isLoading: boolean;
  isUserTasksModule: boolean;
  pagination: HuTableLoaderProps;
};

export const PendingTasksTab = ({
  tasks,
  isLoading,
  isUserTasksModule,
  pagination,
}: PendingTasksTabProps) => {
  const { t } = useLokaliseTranslation('employee_lifecycle');
  const [dependencyTaskId, setDependencyTaskId] = useState<number | null>(null);

  // Format tasks
  const { availableTasks, notAvailableTasks } = useFormatStepTasks({
    tasks,
    isPendingTab: true,
    setDependencyTaskId,
    isUserTasksModule,
  });

  return (
    <>
      <ItemsList
        title={isUserTasksModule ? t('tasks.list') : t('tasks.available')}
        headerRight={isUserTasksModule && <FilterChips isTasks />}
        items={availableTasks}
        isLoading={isLoading}
        pagination={pagination}
        emptyTexts={{
          title: t('empty_tasks_list.pending_title'),
          description: t('empty_tasks_list.pending_description'),
        }}
      />
      {!!notAvailableTasks.length && (
        <ItemsList
          title={t('tasks.not_available')}
          description={t('tasks.not_available_title')}
          items={notAvailableTasks}
          isLoading={isLoading}
        />
      )}
      <BlockedTaskWarning
        dependencyTaskId={dependencyTaskId}
        clearDependencyTaskId={() => setDependencyTaskId(null)}
      />
    </>
  );
};