import styled from "@emotion/styled";
import { observer } from "mobx-react";
import React from "react";
import { CurrentUser_me } from "../../graphql/generated/types";
import { SlideshowStore } from "../../platform/SlideshowStore";
import Mouse from "./Mouse";
import MouseClick from "./MouseClick";

type Props = {
  store: SlideshowStore;
  user: CurrentUser_me;
  container: React.RefObject<HTMLDivElement>;
};

function MouseList(props: Props) {
  return (
    <>
      {Array.from(props.store.mouseInfo.keys())
        .filter((mouseInfoKey) => mouseInfoKey !== props.user.id)
        .map((mouseInfoKey: any) => (
          <Mouse
            user={props.user}
            key={mouseInfoKey}
            mouseKey={mouseInfoKey}
            store={props.store}
            container={props.container}
          />
        ))}
      {Array.from(props.store.mouseClicks.keys())
        .filter((mouseClickKey) => mouseClickKey !== props.user.id)
        .map((mouseClickKey) => (
          <MouseClick
            user={props.user}
            key={mouseClickKey}
            mouseKey={mouseClickKey}
            store={props.store}
            container={props.container}
          />
        ))}
    </>
  );
}

export default observer(MouseList);

const Container = styled.div``;