"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DefaultVideo = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const models_1 = require("../../models/index.js");
const utils_1 = require("../../utils/index.js");
const utils_2 = require("../Media/Video/utils.js");
const CustomBarControls_1 = tslib_1.__importDefault(require("../ReactPlayer/CustomBarControls.js"));
const b = (0, utils_1.block)('default-video');
exports.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 === models_1.CustomControlsType.WithPlayPauseButton) {
            onPlayToggle();
        }
    }, [onPlayToggle, customControlsType]);
    return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.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: [(0, utils_2.getVideoTypesWithPriority)(video.src).map(({ src, type }, index) => ((0, jsx_runtime_1.jsx)("source", { src: src, type: type, "data-qa": qa }, index))), (0, jsx_runtime_1.jsx)("track", { default: true, kind: "captions" })] }), controls === models_1.MediaVideoControlsType.Custom && ((0, jsx_runtime_1.jsx)(CustomBarControls_1.default, { className: customBarControlsClassName, type: customControlsType, isPaused: isPaused, onPlayClick: onPlayToggle, muteButtonShown: muteButtonShown, shown: true, positioning: positioning, mute: {
                    isMuted: Boolean(isMuted),
                    changeMute: onMuteToggle,
                } }))] }));
});
exports.DefaultVideo.displayName = 'DefaultVideo';
//# sourceMappingURL=DefaultVideo.js.map
