import {BMProps} from '@components/utils'
import {Tooltip} from '@material-ui/core'
import {ParticipantBase} from '@stores/participants/ParticipantBase'
import {useObserver} from 'mobx-react-lite'
import React from 'react'

interface MouseCursorProps extends BMProps{
  participantId: string
}


export const MouseCursor: React.FC<MouseCursorProps> = (props:MouseCursorProps) => {
  const participants = props.stores.participants
  const participant = participants.find(props.participantId) as ParticipantBase
  const position = useObserver(() => participant.mouse.position)
  const name = useObserver(() => participant.information.name)
  const [color] = participant.getColor()
  if (!position) {
    return <div />
  }
  const isLocal = props.participantId === participants.localId

  const cursor = <div style={{width:18, height:30, left:position[0], top:position[1], position:'absolute',
    pointerEvents: isLocal ? 'none' : 'auto',
  }}>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 100">
      <polygon points="32,100 53,92 36,57 60,56 0,0 0,81 16,65 32,100" stroke="black" fill={color} strokeWidth="6" />
    </svg>
  </div>

  return isLocal ? cursor
    :<Tooltip title={name}>{cursor}</Tooltip>
}