import { FC, useEffect, useRef } from 'react';

import Box from '@material-hu/mui/Box';
import Chip from '@material-hu/mui/Chip';
import Divider from '@material-hu/mui/Divider';
import Grid from '@material-hu/mui/Grid';

import { User } from 'src/types/user';

import { RegularChatAvatar } from 'src/components/dashboard/chat/ChatAvatar';
import { RegularChatName } from 'src/components/dashboard/chat/ChatName';
import PeopleSearch from 'src/components/dashboard/people/PeopleSearch';
import { peopleSearchKeys } from 'src/components/dashboard/people/queries';

export type SelectParticipantsProps = {
  selected: User[];
  onAdd: (user: User) => void;
  onDelete: (index: number) => void;
};

const SelectParticipants: FC<SelectParticipantsProps> = props => {
  const { selected, onAdd, onDelete } = props;

  const boxRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (boxRef.current) {
      boxRef.current.scrollTop = boxRef.current.scrollHeight;
    }
  }, [selected]);

  const handleAdd = (user: User) => {
    onAdd && onAdd(user);
  };

  const handleDelete = (index: number) => {
    onDelete && onDelete(index);
  };

  const notIncludingIds = selected.map(user => user.id);

  return (
    <>
      <Divider sx={{ mb: 1 }} />
      {selected.length > 0 && (
        <>
          <Grid
            container
            spacing={1}
          >
            <Box
              ref={boxRef}
              sx={{
                scrollbarWidth: 'thin',
                flexDirection: 'row',
                flexWrap: 'wrap',
                maxHeight: '300px',
                p: 2,
                display: 'flex',
                width: '100%',
                overflowY: 'auto',
                '& p': {
                  fontSize: '13px !important',
                  fontWeight: 400,
                  color: '#3b4a54',
                },
                '& .MuiChip-label': {
                  px: 1.2,
                },
              }}
            >
              {selected.map((participant, index) => (
                <Grid
                  key={participant.id}
                  item
                  xs="auto"
                >
                  <Chip
                    avatar={
                      <RegularChatAvatar
                        otherUser={participant}
                        withLink={false}
                        size={26}
                      />
                    }
                    label={
                      <RegularChatName
                        otherUser={participant}
                        withLink={false}
                      />
                    }
                    size="small"
                    onDelete={() => handleDelete(index)}
                    sx={{ m: 0.5 }}
                  />
                </Grid>
              ))}
            </Box>
          </Grid>
          <Divider sx={{ mb: 1 }} />
        </>
      )}
      <PeopleSearch
        queryKey={peopleSearchKeys.searchGroupParticipants}
        onSelect={handleAdd}
        keepPreviousData
        filterSelf
        notIncludingIds={notIncludingIds}
      />
    </>
  );
};

export default SelectParticipants;