import React from 'react';
import { observer } from 'mobx-react-lite';
import { PlayerContext } from 'Components/Session/playerContext';
import { Loader } from 'UI';
import PlayIconLayer from 'Components/Session_/Player/Overlay/PlayIconLayer';
import ClipFeedback from 'Components/Session/Player/ClipPlayer/ClipFeedback';
import AutoplayTimer from 'Components/Session/Player/ClipPlayer/AutoPlayTimer';

interface Props {
  autoplay: boolean;
  isHighlight?: boolean;
}

function Overlay({ autoplay, isHighlight }: Props) {
  const { player, store } = React.useContext(PlayerContext);
  const togglePlay = () => player.togglePlay();

  const { messagesLoading, playing, completed } = store.get();

  return (
    <>
      {messagesLoading ? <Loader /> : null}
      {isHighlight ? null : (
        <div className="hidden group-hover:block">
          <ClipFeedback />
        </div>
      )}
      <PlayIconLayer playing={playing} togglePlay={togglePlay} />
      {completed && autoplay && <AutoplayTimer />}
    </>
  );
}

export default observer(Overlay);