import React, {useMemo} from 'react';
// import ChatPanel from './chat/panel';
// import StudentList from './student-list';
// import useChatText from '../hooks/use-chat-text';
// import { VolumeOff, VolumeUp, ImportExport } from '@material-ui/icons';
import {roomStore} from "../stores/room";
import {useRoomState} from "../containers/root-container";
import './room-tools-bar.scss';
import VoiceOverOffIcon from "@material-ui/icons/VoiceOverOff";
import RecordVoiceOverIcon from "@material-ui/icons/RecordVoiceOver";
import Category from "@material-ui/icons/Category";
import ImportContacts from "@material-ui/icons/ImportContacts";
import SettingsApplicationsIcon from '@material-ui/icons/SettingsApplications';
import SettingsPowerIcon from '@material-ui/icons/SettingsPower';
import {TOOL_TYPE} from "../utils/types";
// import EmojiEventsIcon from '@material-ui/icons/EmojiEvents';
// import {eventBus} from "../stores/EventBus";
import AddStarsButton, {StarsButtonType} from './add-stars-btn';

type Props = {
  // zoomScale: number
  // zoomChange: (scale: number) => void
  onClick: (type: string) => void
  // onClickBoardLock: () => void
};
export default function RoomToolsBar (props: any) {
// export const RoomToolsBar: React.FC<Props> = ({onClick}) => {
  const roomState = useRoomState();
  const changeTool = async () => {
    console.log(roomStore.state.course.currentTool);
    if (roomStore.state.course.currentTool === TOOL_TYPE.WHITEBOARD) {
      await roomStore.setCurrentTool(TOOL_TYPE.COURSE_WARE)
    } else {
      await roomStore.setCurrentTool(TOOL_TYPE.WHITEBOARD)
    }
  }
  const {currentTool} = useMemo(() => {
    return {
      currentTool: roomStore.state.course.currentTool
    }
    // eslint-disable-next-line
  }, [roomState]);

  const {muteAudio} = useMemo(() => {
    return {
      muteAudio: roomState.course.muteAudio
    }
  }, [roomState.course]);
  const allMuteOn = async () => {
    console.log('allStudentMuteOn');
    await roomStore.allStudentMuteOn()
  }
  const allMuteOff = async () => {
    console.log('allStudentMuteOff');
    await roomStore.allStudentMuteOff()
  }
  // const allAddStar = async () => {
  //   eventBus.emit('showAddStartDialog', {uid: 0})
  // }
  // const randomStageUp = async () => {
  //   await roomStore.randomStageUp()
  // }

  return (
    <>
      <div className={'room-tool-box'}>

        {roomStore.state.me.role === 'teacher' ?
          <>
            <AddStarsButton type={StarsButtonType.BIG} uid={0}></AddStarsButton>
            {/*<div className="tool-btn" onClick={allAddStar}><EmojiEventsIcon/></div>*/}
            {muteAudio
              ? <div className="tool-btn" onClick={allMuteOff}><RecordVoiceOverIcon/></div>
              : <div onClick={allMuteOn} className="tool-btn"><VoiceOverOffIcon/></div>
            }
            {currentTool === TOOL_TYPE.WHITEBOARD
              ? <div className="tool-btn" onClick={changeTool}><ImportContacts/></div>
              : <div onClick={changeTool} className="tool-btn"><Category/></div>
            }
          </>: null }



        <div className="tool-btn" onClick={(evt: any) => {
          props.onClick("setting");
        }}><SettingsApplicationsIcon/></div>
        <div className="tool-btn" onClick={(evt: any) => {
          props.onClick("exit");
        }}><SettingsPowerIcon/></div>
        {/*<div className="tool-btn"><ImportExport onClick={randomStageUp}></ImportExport></div>*/}
      </div>
    </>
  )
}
