/**
 * @Move (SQPM)
 * Only used by the Performance module - move to Performance/
 */
import CloseIcon from '@material-hu/icons/material/Close';
import DialogContent from '@material-hu/mui/DialogContent';
import DialogContentText from '@material-hu/mui/DialogContentText';
import DialogTitle from '@material-hu/mui/DialogTitle';
import IconButton from '@material-hu/mui/IconButton';
import Skeleton from '@material-hu/mui/Skeleton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { usersRoutes } from 'src/pages/dashboard/Users/routes';
import { useInfiniteUsersPublicSearch } from 'src/services/usersQueries';
import { User } from 'src/types/user';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { flatPages, InfiniteResponse } from 'src/utils/tableUtils';

import CenteredCircularProgress from '../CircularProgress';
import { InfiniteList } from '../InfiniteList';
import UserInfo from '../UserInfo';

type Props = {
  ids: number[];
  onClose: () => void;
};

function EmployeesLeaderModal({ ids, onClose }: Props) {
  const { t } = useLokaliseTranslation('backoffice_only');
  const allUsers = useInfiniteUsersPublicSearch({ ids, limit: 10 });
  const usersCount = allUsers.data?.pages[0]?.data?.count || 0;
  const usersList = flatPages(allUsers.data as InfiniteResponse<User>);

  if (allUsers.isLoading) {
    return (
      <DialogContent sx={{ width: '600px' }}>
        <CenteredCircularProgress
          centered
          sx={{ my: '100px' }}
        />
      </DialogContent>
    );
  }

  return (
    <>
      <DialogTitle>
        <Stack
          direction="row"
          alignItems="center"
          justifyContent="space-between"
        >
          <Typography variant="h5">
            {t('backoffice_only:employees_leader_modal.employees_title', {
              count: usersCount,
            })}
          </Typography>
          <IconButton onClick={onClose}>
            <CloseIcon />
          </IconButton>
        </Stack>
      </DialogTitle>
      <DialogContent style={{ maxHeight: '500px' }}>
        <DialogContentText variant="body2">
          {t('backoffice_only:employees_leader_modal.employees_sub')}
        </DialogContentText>
        <Stack
          spacing={3}
          my={2}
        >
          {usersList?.map(user => (
            <UserInfo
              key={user.id}
              user={user}
              showEmail={false}
              onClick={() =>
                window.open(usersRoutes.editUser(user.id), '_blank')
              }
            />
          ))}
          <InfiniteList
            isSuccess={!!allUsers.data}
            isLoading={allUsers.isLoading}
            isEmpty={
              allUsers?.data?.pages && !allUsers?.data?.pages[0]?.data?.count
            }
            fetchNextPage={allUsers.fetchNextPage}
            hasNextPage={allUsers.hasNextPage}
            isFetchingNextPage={allUsers.isFetchingNextPage}
            renderSkeleton={
              <Stack
                direction="row"
                alignItems="center"
                pr={2}
              >
                <Skeleton
                  animation="wave"
                  height={40}
                  width={45}
                  variant="circular"
                  style={{ marginRight: 10 }}
                />
                <Stack width="100%">
                  <Skeleton
                    animation="wave"
                    height={25}
                    width="80%"
                  />
                  <Skeleton
                    animation="wave"
                    height={20}
                    width="60%"
                  />
                </Stack>
              </Stack>
            }
          >
            <div />
          </InfiniteList>
        </Stack>
      </DialogContent>
    </>
  );
}

export default EmployeesLeaderModal;