import React, { useMemo } from "react";
import { useDispatch } from "../../../../store/redux-separate-context";
import { resetGlobalPauseAction, setGlobalPauseAction } from "../../../../domains/global/actions";
import Tooltip from "../../../tooltips";
import StyledPill from "./styledPill";
const getIcon = (isPlaying, isForcePlaying) => {
    if (!isPlaying)
        return "pauseSolid";
    return isForcePlaying ? "forcePlay" : "playSolid";
};
const PlayPausePill = ({ isPlaying, isForcePlaying }) => {
    const dispatch = useDispatch();
    const onPlay = () => dispatch(resetGlobalPauseAction({ forcePlay: false }));
    const onPause = () => dispatch(setGlobalPauseAction());
    const icon = useMemo(() => getIcon(isPlaying, isForcePlaying), [isPlaying, isForcePlaying]);
    return (React.createElement(Tooltip, { content: isPlaying ? "Click to pause" : "Click to play", align: "bottom", plain: true },
        React.createElement(StyledPill, { icon: icon, onClick: isPlaying ? onPause : onPlay, isPlaying: isPlaying }, isPlaying ? "Playing" : "Paused")));
};
export default PlayPausePill;
//# sourceMappingURL=index.js.map