import React, { useContext } from 'react';
import { observer } from 'mobx-react-lite';
import DraggableCircle from 'Components/Session_/Player/Controls/components/DraggableCircle';
import { PlayerContext } from 'Components/Session/playerContext';
import TimeTracker from 'Components/Session/Player/ClipPlayer/TimeTracker';

function TimelineTracker({
  scale,
  onDragEnd,
}: {
  scale: number;
  onDragEnd: () => void;
}) {
  const { store } = useContext(PlayerContext);
  const { time, range } = store.get();
  const adjustedTime = time - range[0];

  return (
    <>
      <DraggableCircle left={adjustedTime * scale} onDrop={onDragEnd} />
      <TimeTracker scale={scale} left={(adjustedTime - range[0]) * scale} />
    </>
  );
}

export default observer(TimelineTracker);