import { FC, ReactEventHandler } from "react";

import { useAppDispatch } from "app/hooks";
import SearchableList from "components/SearchableList";
import RoomListEntry from "modules/room/RoomListEntry";
import { RoomMap, roomGetAll } from "modules/room/slice";

interface Props {
  rooms: RoomMap;
  onShowMenu: () => void;
}

const RoomList: FC<Props> = ({ rooms, onShowMenu }) => {
  const dispatch = useAppDispatch();

  const onRefresh: ReactEventHandler = (event) => {
    event.preventDefault();
    dispatch(roomGetAll());
  };

  // TODO: Move header out of SearchableList component.
  return (
    <SearchableList
      title="Chat Rooms"
      onShowMenu={onShowMenu}
      onRefresh={onRefresh}
      component={RoomListEntry}
      map={rooms}
    />
  );
};

export default RoomList;