import React, {useMemo} from 'react';
import { useRoomState} from '../containers/root-container';
// import { isEmpty } from 'lodash';
// import {roomStore} from "../stores/room";
import PanToolIcon from "@material-ui/icons/PanTool";
import './hands-up-icon.scss';


interface UserStarsProps {
  id?: string,
  streamID: number
  // stars: number
}

export default function HandsUpIcon({id, streamID}: UserStarsProps) {
  const state = useRoomState();

  // const isHandUp = useMemo(() => {
  //   const hu = roomStore.state.handsUpStudents[streamID];
  //   console.log('HandsUpIcon', streamID, hu)
  //   return hu
  // }, [state.handsUpStudents]);

  const isHandUp = useMemo(() => {
    const hu = state.handsUpStudents[streamID];
    console.log(streamID, hu)
    return hu
    // eslint-disable-next-line
  }, [state]);


  return (
    <>
      {
        isHandUp ?
          <div className="hands-circle">
            <PanToolIcon className='hands-btn blink'></PanToolIcon>
          </div>
          :null
      }
      </>
  )
}
