import { useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import { getDMChannels } from '../../../store/channels';
import FoundUsername from '../../user/username';
import { ChannelTypes } from '@acrd/types';

const DMList: React.FunctionComponent = () => {
  const channels = useSelector(getDMChannels());
  const selfUser = useSelector((s: Store.AppState) => s.auth.user)!;
  const users = useSelector((s: Store.AppState) => s.entities.users);

  
  return (
    <div className="channels px-2 w-60 bg-bg-secondary">
      <div className="mt-2">
        {channels.map(c => {
          const otherUserId = (c as ChannelTypes.DM).userIds
            .find(id => id !== selfUser.id);
          const otherUser = users.find(u => u.id === otherUserId);
          if (!otherUser) return null;
  
          return (
            <Link
              key={c.id}
              to={`/channels/@me/${c.id}`}
              className="flex items-center rounded p-2 mb-2 hover:bg-bg-modifier-hover">
              <FoundUsername user={otherUser} size="sm" />
            </Link>
          );
        })}
      </div>
    </div>
  );
}

export default DMList;