import React, { PureComponent } from 'react';
import CaptionsButtonContainer from '/imports/ui/components/captions/button/container';
import deviceInfo from '/imports/utils/deviceInfo';
import Styled from './styles';
import ActionsDropdown from './actions-dropdown/container';
import AudioCaptionsButtonContainer from '/imports/ui/components/audio/captions/button/container';
import ScreenshareButtonContainer from '/imports/ui/components/actions-bar/screenshare/container';
import AudioControlsContainer from '../audio/audio-controls/container';
import JoinVideoOptionsContainer from '../video-provider/video-button/container';
import PresentationOptionsContainer from './presentation-options/component';
import RaiseHandDropdownContainer from './raise-hand/container';

class ActionsBar extends PureComponent {
  componentDidUpdate(prevProps) {
    const {
      hasScreenshare,
      hasExternalVideo,
      isTherePresentation,
      setPresentationIsOpen,
      layoutContextDispatch
    } = this.props;

    if (prevProps.isTherePresentation && !isTherePresentation && !hasScreenshare && !hasExternalVideo) {
        setPresentationIsOpen(layoutContextDispatch, false);
    } 
  }

  render() {
    const {
      amIPresenter,
      amIModerator,
      enableVideo,
      presentationIsOpen,
      setPresentationIsOpen,
      handleTakePresenter,
      intl,
      isSharingVideo,
      hasScreenshare,
      stopExternalVideoShare,
      isCaptionsAvailable,
      isMeteorConnected,
      isPollingEnabled,
      isSelectRandomUserEnabled,
      isRaiseHandButtonEnabled,
      isThereCurrentPresentation,
      isTherePresentation,
      allowExternalVideo,
      setEmojiStatus,
      currentUser,
      layoutContextDispatch,
      actionsBarStyle,
      setMeetingLayout,
      showPushLayout,
      setPushLayout,
    } = this.props;

    return (
      <Styled.ActionsBar
        style={
          {
            height: actionsBarStyle.innerHeight,
          }
        }
      >
        <Styled.Left>
          <ActionsDropdown {...{
            amIPresenter,
            amIModerator,
            isPollingEnabled,
            isSelectRandomUserEnabled,
            allowExternalVideo,
            handleTakePresenter,
            intl,
            isSharingVideo,
            stopExternalVideoShare,
            isMeteorConnected,
            setMeetingLayout,
            setPushLayout,
            presentationIsOpen,
            showPushLayout,
          }}
          />
          {isCaptionsAvailable
            ? (
              <CaptionsButtonContainer {...{ intl }} />
            )
            : null}
          { !deviceInfo.isMobile
            ? (
              <AudioCaptionsButtonContainer />
            )
            : null }
        </Styled.Left>
        <Styled.Center>
          <AudioControlsContainer />
          {enableVideo
            ? (
              <JoinVideoOptionsContainer />
            )
            : null}
          <ScreenshareButtonContainer {...{
            amIPresenter,
            isMeteorConnected,
          }}
          />
        </Styled.Center>
        <Styled.Right>
          <PresentationOptionsContainer
            presentationIsOpen={presentationIsOpen}
            setPresentationIsOpen={setPresentationIsOpen}
            layoutContextDispatch={layoutContextDispatch}
            hasCurrentPresentation={isThereCurrentPresentation}
            hasPresentation={isTherePresentation}
            hasExternalVideo={isSharingVideo}
            hasScreenshare={hasScreenshare}
          />
          {isRaiseHandButtonEnabled
            ? (
              <RaiseHandDropdownContainer {...{
                setEmojiStatus,
                currentUser,
                intl,
              }
              }
              />
            ) : null}
        </Styled.Right>
      </Styled.ActionsBar>
    );
  }
}

export default ActionsBar;