import styled from "@emotion/styled";
import { observer } from "mobx-react";
import React from "react";
import { LIGHT_PRIMARY_THREE } from "../../../shared/colors";
import { ID } from "../../../shared/types";
import { generateRandomColor } from "../../../shared/utils/utils";
import { CurrentUser_me } from "../../graphql/generated/types";
import { SlideshowStore } from "../../platform/SlideshowStore";

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

function Mouse(props: Props) {
  const color = generateRandomColor(
    props.store.mouseInfo.get(props.mouseKey)!.userId
  );

  const userId = props.store.mouseInfo.get(props.mouseKey)!.userId;
  const name = props.user.team.users.find((user) => user.id === userId)?.name;

  return (
    <div
      className={`mouse-${props.mouseKey}`}
      style={{
        position: "absolute",
        transform: `translate(${
          props.store.mouseInfo.get(props.mouseKey)!.x - 3.25
        }px, ${props.store.mouseInfo.get(props.mouseKey)!.y - 3}px)`,
        transition: ".05s ease-in-out",
        pointerEvents: "none",
      }}
    >
      <svg width="18" height="25.5" viewBox="0 0 12 17" style={{ zIndex: 2 }}>
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M0 16.4217V0.406738L11.591 12.0257H4.55L4.399 12.1497L0 16.4217Z"
          fill="white"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M1 2.81396V14.002L3.969 11.136L4.129 10.997H9.165L1 2.81396Z"
          fill={color}
        />
      </svg>
      <div
        style={{
          color: LIGHT_PRIMARY_THREE,
          fontSize: "12px",
          backgroundColor: color,
          padding: "2px",
          fontWeight: "bold",
          zIndex: 99999,
        }}
      >
        {name ? name : "A viewer"}
      </div>
    </div>
  );
}

export default observer(Mouse);

const Name = styled.div<{ color: string }>`
  color: ${LIGHT_PRIMARY_THREE};
  font-size: 12px;
  background-color: ${(props) => props.color};
  padding: 2px;
  font-weight: bold;
  z-index: 99999;
  pointer-events: none;
`;

const Svg = styled.svg`
  z-index: 99999;
`;