import { type TFunction, Trans } from 'react-i18next';
import ScrollBar from 'react-perfect-scrollbar';
import { Link as RouterLink } from 'react-router-dom';

import { times } from 'lodash-es';
import AccountCircleIcon from '@material-hu/icons/material/AccountCircle';
import Avatar from '@material-hu/mui/Avatar';
import Link from '@material-hu/mui/Link';
import List from '@material-hu/mui/List';
import ListItem from '@material-hu/mui/ListItem';
import ListItemAvatar from '@material-hu/mui/ListItemAvatar';
import ListItemText from '@material-hu/mui/ListItemText';
import Skeleton from '@material-hu/mui/Skeleton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { type MissingAttribute, type Survey } from 'src/types/peopleExperience';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { InfiniteList } from 'src/components/InfiniteList';

import useMissingUsers from '../../hooks/useMissingUsers';

const UserSkeleton = () => (
  <Stack sx={{ flexDirection: 'row', gap: 2, px: 2, py: 1 }}>
    <Skeleton
      variant="circular"
      width={40}
      height={40}
    />
    <Stack sx={{ flex: 1 }}>
      <Skeleton
        variant="text"
        sx={{ fontSize: '1.2rem' }}
      />
      <Skeleton
        variant="text"
        sx={{ fontSize: '1rem' }}
      />
    </Stack>
  </Stack>
);

type MissingDataUserListProps = {
  missingAttribute: MissingAttribute | null;
  surveyId: Survey['id'];
  groupName?: string;
  groupId?: number;
  skipUpdateAdvice?: boolean;
};

const MissingDataUserList = ({
  missingAttribute,
  groupId,
  surveyId,
  groupName,
  skipUpdateAdvice,
}: MissingDataUserListProps) => {
  const { t } = useLokaliseTranslation('people_experience');

  const {
    data,
    isLoading,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    isRefetching,
  } = useMissingUsers({
    surveyId,
    attribute: missingAttribute,
    groupId,
  });

  const flatData = (data?.pages ?? []).flatMap(page => page.data.items);

  return (
    <ScrollBar>
      <Stack sx={{ gap: 2, px: 4 }}>
        <Typography
          component="p"
          variant="body1"
        >
          <Trans
            i18nKey="missing_info_description"
            ns="people_experience"
            t={t as TFunction}
            values={{
              attribute: groupName,
            }}
            components={{
              title: (
                <Typography
                  key="attribute-name"
                  component="span"
                  sx={{
                    fontWeight: theme => theme.typography.fontWeightMedium,
                  }}
                />
              ),
            }}
          />
          {!skipUpdateAdvice && (
            <>
              {' '}
              <Trans
                i18nKey="update_info_advice"
                t={t as TFunction}
                ns="people_experience"
                values={{
                  attribute: groupName,
                }}
                components={{
                  a: (
                    <Link
                      key="update"
                      underline="hover"
                      sx={{ verticalAlign: 'baseline' }}
                      component={RouterLink}
                      to="/users"
                    />
                  ),
                }}
              />
            </>
          )}
        </Typography>
        {isLoading && (
          <Stack>
            {times(3, index => (
              <UserSkeleton key={`skeleton_${index}`} />
            ))}
          </Stack>
        )}
        {!isLoading && (
          <List
            sx={{ opacity: isRefetching ? 0.5 : 1 }}
            disablePadding
          >
            {flatData?.map(
              ({ id, firstName, lastName, email, profilePicture }) => (
                <ListItem
                  key={id}
                  disablePadding
                >
                  <ListItemAvatar>
                    {!!profilePicture && (
                      <Avatar
                        alt={t('AVATAR_PHOTO_ALT', { username: firstName })}
                        src={profilePicture}
                      />
                    )}
                    {!profilePicture && (
                      <Avatar>
                        <AccountCircleIcon />
                      </Avatar>
                    )}
                  </ListItemAvatar>
                  <ListItemText
                    primary={`${firstName} ${lastName}`}
                    secondary={email ?? '-'}
                  />
                </ListItem>
              ),
            )}
          </List>
        )}
      </Stack>
      <InfiniteList
        isSuccess={!!data}
        isLoading={isLoading}
        fetchNextPage={fetchNextPage}
        isFetchingNextPage={isFetchingNextPage}
        hasNextPage={hasNextPage}
        renderSkeleton={<UserSkeleton />}
      >
        <div />
      </InfiniteList>
    </ScrollBar>
  );
};

export default MissingDataUserList;