import { jsx as _jsx } from "react/jsx-runtime";
import React, { useCallback, useEffect } from 'react';
import { PALETTE } from '../layout/colors';
import { PausedIcon, PlayingIcon } from './icons';
const playerButtonStyle = {
    appearance: 'none',
    border: 'none',
    borderRadius: 0,
    background: 'none',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    paddingRight: 20,
    paddingLeft: 20,
    cursor: 'pointer',
    height: 50,
    color: PALETTE.TEXT_COLOR,
};
export const PlayPauseButton = ({ playerRef }) => {
    const [playing, setPlaying] = React.useState(true);
    useEffect(() => {
        const { current } = playerRef;
        if (!current) {
            return;
        }
        const onPlay = () => {
            setPlaying(true);
        };
        const onPause = () => {
            setPlaying(false);
        };
        current.addEventListener('play', onPlay);
        current.addEventListener('pause', onPause);
        return () => {
            current.removeEventListener('play', onPlay);
            current.removeEventListener('pause', onPause);
        };
    }, [playerRef]);
    const onToggle = useCallback(() => {
        var _a;
        (_a = playerRef.current) === null || _a === void 0 ? void 0 : _a.toggle();
    }, [playerRef]);
    const playPauseIconStyle = {
        width: 15,
    };
    return (_jsx("button", { type: "button", style: playerButtonStyle, onClick: onToggle, children: playing ? (_jsx(PlayingIcon, { style: playPauseIconStyle })) : (_jsx(PausedIcon, { style: playPauseIconStyle })) }));
};
