import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { CustomControlsType, MediaVideoControlsType } from "../../models/index.js";
import { block } from "../../utils/index.js";
import { getVideoTypesWithPriority } from "../Media/Video/utils.js";
import CustomBarControls from "../ReactPlayer/CustomBarControls.js";
import './DefaultVideo.css';
const b = block('default-video');
export const DefaultVideo = React.forwardRef((props, ref) => {
    const { video, qa, customBarControlsClassName } = props;
    const { controls, customControlsOptions, muted: initiallyMuted = true } = video;
    const { muteButtonShown, positioning, type: customControlsType, } = customControlsOptions || {};
    const [isPaused, setIsPaused] = React.useState(false);
    const [isMuted, setIsMuted] = React.useState(initiallyMuted);
    const videoRef = React.useRef(null);
    // one may not use this hook and work with `ref` variable only, but
    // in this case one should support both function type and object type,
    // according to ForwardedRef type.
    // Currently used way with extra ref and useImperativeHandle is more
    // convenient and allows us to work with object typed ref only,
    // avoiding typeof ref === 'function' statements
    React.useImperativeHandle(ref, () => {
        if (!videoRef?.current) {
            return undefined;
        }
        return videoRef.current;
    }, [videoRef]);
    const onPlayToggle = React.useCallback(() => {
        setIsPaused((value) => {
            if (value) {
                videoRef?.current?.play();
            }
            else {
                videoRef?.current?.pause();
            }
            return !value;
        });
    }, [videoRef]);
    const onMuteToggle = React.useCallback(() => {
        setIsMuted((value) => !value);
    }, []);
    const onClick = React.useCallback(() => {
        if (customControlsType === CustomControlsType.WithPlayPauseButton) {
            onPlayToggle();
        }
    }, [onPlayToggle, customControlsType]);
    return (_jsxs(React.Fragment, { children: [_jsxs("video", { disablePictureInPicture: true, playsInline: true, 
                // @ts-ignore
                // eslint-disable-next-line react/no-unknown-property
                pip: "false", className: b(), ref: videoRef, preload: "metadata", muted: isMuted, "aria-label": video.ariaLabel, onClick: onClick, children: [getVideoTypesWithPriority(video.src).map(({ src, type }, index) => (_jsx("source", { src: src, type: type, "data-qa": qa }, index))), _jsx("track", { default: true, kind: "captions" })] }), controls === MediaVideoControlsType.Custom && (_jsx(CustomBarControls, { className: customBarControlsClassName, type: customControlsType, isPaused: isPaused, onPlayClick: onPlayToggle, muteButtonShown: muteButtonShown, shown: true, positioning: positioning, mute: {
                    isMuted: Boolean(isMuted),
                    changeMute: onMuteToggle,
                } }))] }));
});
DefaultVideo.displayName = 'DefaultVideo';
//# sourceMappingURL=DefaultVideo.js.map
