import React, { useMemo, useRef } from "react";
import { useSelector } from "../../../store/redux-separate-context";
import { selectHasWindowFocus, selectStopUpdatesWhenFocusIsLost, selectGlobalPanAndZoom, selectGlobalPause, selectGlobalSelection, } from "../../../domains/global/selectors";
import { ReduxWrappedPicker } from "../../date-picker";
import Item from "../item";
import Container from "./container";
import PlayPausePill from "./playPausePill";
import PlayOptions from "./playOptions";
const tagging = "global-view";
const GlobalControls = () => {
    const ref = useRef();
    const hasWindowFocus = useSelector(selectHasWindowFocus);
    const stopUpdatesWhenFocusIsLost = useSelector(selectStopUpdatesWhenFocusIsLost);
    const globalPanAndZoom = useSelector(selectGlobalPanAndZoom);
    const hoveredX = useSelector(selectGlobalSelection);
    const globalPause = useSelector(selectGlobalPause);
    const isPlaying = useMemo(() => Boolean((hasWindowFocus || !stopUpdatesWhenFocusIsLost) &&
        !globalPanAndZoom &&
        !hoveredX &&
        !globalPause), [hasWindowFocus, stopUpdatesWhenFocusIsLost, globalPanAndZoom, hoveredX, globalPause]);
    return (React.createElement(Item, { hasBorder: true },
        React.createElement(Container, { isPlaying: isPlaying, padding: [2, 2], round: true, height: "100%", alignItems: "center", gap: 1, ref: ref },
            React.createElement(PlayPausePill, { isPlaying: isPlaying, isForcePlaying: !stopUpdatesWhenFocusIsLost }),
            React.createElement(PlayOptions, { target: ref }),
            React.createElement(ReduxWrappedPicker, { isPlaying: isPlaying, tagging: tagging }))));
};
export default GlobalControls;
//# sourceMappingURL=index.js.map