import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useEffect, useRef, useState } from 'react';
import { PALETTE } from '../layout/colors';
import { IsMutedIcon, NotMutedIcon } from './icons';
export const PlayerVolume = ({ playerRef }) => {
    const [muted, setIsMuted] = useState(() => { var _a, _b; return (_b = (_a = playerRef.current) === null || _a === void 0 ? void 0 : _a.isMuted()) !== null && _b !== void 0 ? _b : true; });
    const [isHovered, setIsHovered] = useState(false);
    const timerRef = useRef(null);
    useEffect(() => {
        const { current } = playerRef;
        if (!current) {
            return;
        }
        const onMutedChange = (e) => {
            setIsMuted(e.detail.isMuted);
        };
        current.addEventListener('mutechange', onMutedChange);
        return () => {
            current.removeEventListener('mutechange', onMutedChange);
        };
    }, [playerRef]);
    useEffect(() => {
        if (isHovered) {
            document.body.style.userSelect = 'none';
        }
        else {
            document.body.style.userSelect = 'auto';
        }
    }, [isHovered]);
    const onClick = useCallback(() => {
        if (timerRef.current !== null) {
            clearTimeout(timerRef.current);
            timerRef.current = null;
        }
        if (playerRef.current.isMuted()) {
            playerRef.current.unmute();
        }
        else {
            playerRef.current.mute();
        }
    }, [playerRef]);
    return (_jsx("div", { className: 'relative cursor-pointer block pl-4 pr-4 h-full', onPointerEnter: () => setIsHovered(true), children: _jsx("button", { type: "button", onClick: onClick, style: {
                background: 'transparent',
                border: 0,
                cursor: 'pointer',
                padding: 0,
                display: 'flex',
                height: 50,
                justifyContent: 'center',
                alignItems: 'center',
                color: PALETTE.TEXT_COLOR,
            }, children: muted ? (_jsx(IsMutedIcon, { style: { height: 20 } })) : (_jsx(NotMutedIcon, { style: { height: 20 } })) }) }));
};
