import { useEffect } from 'react';
import { useInView } from 'react-intersection-observer';

import CloseIcon from '@material-hu/icons/material/Close';
import Avatar from '@material-hu/mui/Avatar';
import Box from '@material-hu/mui/Box';
import Checkbox from '@material-hu/mui/Checkbox';
import Divider from '@material-hu/mui/Divider';
import IconButton from '@material-hu/mui/IconButton';
import List, { ListProps } from '@material-hu/mui/List';
import ListItem from '@material-hu/mui/ListItem';
import ListItemAvatar from '@material-hu/mui/ListItemAvatar';
import ListItemButton from '@material-hu/mui/ListItemButton';
import ListItemText from '@material-hu/mui/ListItemText';

import { User } from 'src/types/user';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getFullname } from 'src/utils/userUtils';

type Props = {
  users: User[];
  sx?: ListProps['sx'];
  onEndScroll?: Function;
  checkbox?: {
    usersCount: number;
    selected?: number[];
    disabled?: number[];
    onSelect?: (id: number) => void;
    onSelectAll?: () => void;
    allSelected?: boolean;
    someSelected?: boolean;
  };
  showAvatar?: boolean;
  onRemove?: (userId: number) => void;
  showDivider?: boolean;
};

function UsersList({
  users,
  sx,
  onEndScroll,
  checkbox,
  showAvatar = true,
  showDivider = false,
  onRemove,
}: Props) {
  const { t } = useLokaliseTranslation('backoffice_only');

  const [ref, inView] = useInView({
    threshold: 0,
  });

  useEffect(() => {
    if (inView && onEndScroll) {
      onEndScroll();
    }
  }, [inView]);

  const ListComponent = checkbox ? ListItemButton : ListItem;

  return (
    <List
      dense
      sx={sx}
    >
      {checkbox?.onSelectAll && (
        <ListItemButton onClick={checkbox.onSelectAll}>
          <Checkbox
            checked={checkbox.allSelected}
            indeterminate={checkbox.someSelected}
            onChange={checkbox.onSelectAll}
          />
          <ListItemText
            primary={t('backoffice_only:users_list.select_all', {
              count: checkbox.usersCount,
            })}
          />
        </ListItemButton>
      )}
      {users.map(user => (
        <div key={user.id}>
          <ListComponent
            disabled={checkbox?.disabled?.includes(user.id)}
            onClick={() => checkbox?.onSelect?.(user.id)}
            sx={{ p: onRemove ? 0 : 'default' }}
          >
            {checkbox && (
              <Checkbox
                checked={checkbox.selected?.includes(user.id)}
                disabled={checkbox.disabled?.includes(user.id)}
              />
            )}
            {showAvatar && (
              <ListItemAvatar>
                <Avatar src={user.profilePicture || ''} />
              </ListItemAvatar>
            )}
            <ListItemText primary={getFullname(user)} />
            {onRemove && (
              <IconButton onClick={() => onRemove(user.id)}>
                <CloseIcon fontSize="small" />
              </IconButton>
            )}
          </ListComponent>
          {showDivider && <Divider />}
        </div>
      ))}
      <Box
        ref={ref}
        sx={{ height: '1px' }}
      />
    </List>
  );
}

export default UsersList;