import Stack from '@material-hu/mui/Stack';

import Alert from '@material-hu/components/design-system/Alert';
import Table from '@material-hu/components/design-system/Table';
import TableBody from '@material-hu/components/design-system/Table/components/TableBody';
import TableContainer from '@material-hu/components/design-system/Table/components/TableContainer';
import TableLoader from '@material-hu/components/design-system/Table/components/TableLoader';

import { useLokaliseTranslation } from 'src/utils/i18n';
import { lazyRetry } from 'src/utils/lazyRetry';

import { useGetMyTeamJourneys } from '../../../hooks/useGetMyTeamJourneys';
import JourneyFilters from '../JourneyFilters';
import { TableHeader } from '../MyTeamJourneysTable/TableHeader';
import { JourneyTeamRow } from '../MyTeamJourneysTable/TableRow';
import { TableSkeleton } from '../MyTeamJourneysTable/TableSkeleton';

const ListEmpty = lazyRetry(
  () => import('../../../components/ItemsList/ListEmpty'),
);
const StateCard = lazyRetry(
  () => import('@material-hu/components/design-system/StateCard'),
);

const MyTeamTab = () => {
  const { t } = useLokaliseTranslation('employee_lifecycle');
  const {
    journeys,
    handleFetchNextPage,
    isFetchingNextPage,
    isFetching,
    isLoading,
    isError,
    totalCount,
    refetch,
  } = useGetMyTeamJourneys();

  const handleScrollToTop = () => {
    const myTeamTab = document.getElementById('my-team-tab');
    if (!myTeamTab) return;

    myTeamTab.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  const showGeneralLoading = Boolean(isLoading && !journeys?.length);
  const showError = Boolean(!isFetching && isError);
  const showEmpty = Boolean(!isFetching && !isError && !journeys?.length);
  const showTable = Boolean(!isError && journeys?.length);

  return (
    <Stack
      id="my-team-tab"
      sx={{ gap: 4, position: 'relative' }}
    >
      <JourneyFilters loading={isFetching || isFetchingNextPage} />
      <Alert
        severity="info"
        loading={showGeneralLoading}
        title=""
        hasClose
        description={t(
          'journeys.my_team_journeys.more_info_dialog_description',
        )}
      />
      {showEmpty && (
        <ListEmpty
          emptyTexts={{
            title: t('journeys.my_team_journeys.empty_list_title'),
            description: t('journeys.my_team_journeys.empty_list_description'),
          }}
        />
      )}
      {showError && (
        <StateCard
          variant="error"
          primaryAction={{
            label: t('general:retry'),
            onClick: () => refetch(),
          }}
          title={t('process_list.error_fetching_processes')}
          description=""
        />
      )}
      {showTable && (
        <>
          <TableContainer>
            <Table>
              <TableHeader />
              <TableBody>
                {showGeneralLoading && <TableSkeleton />}
                {!showGeneralLoading &&
                  journeys.map((journey, index) => (
                    <JourneyTeamRow
                      key={journey.id}
                      journey={journey}
                      index={index}
                    />
                  ))}
                {isFetchingNextPage && <TableSkeleton />}
              </TableBody>
            </Table>
          </TableContainer>
          <TableLoader
            loadedCount={journeys.length}
            totalCount={totalCount}
            onLoadMore={handleFetchNextPage}
            onScrollToTop={handleScrollToTop}
          />
        </>
      )}
    </Stack>
  );
};

export default MyTeamTab;
