import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { PlayFill } from '@gravity-ui/icons';
import { Icon, useActionHandlers, useUniqId } from '@gravity-ui/uikit';
import debounce from "lodash/debounce.js";
import { v4 as uuidv4 } from 'uuid';
import { useAnalytics } from "../../gravity-blocks/hooks/useAnalytics.js";
import { DefaultEventNames } from "../../models/common.js";
import { block, getPageSearchParams } from "../../utils/index.js";
import Image from "../Image/Image.js";
import { i18n } from "./i18n/index.js";
import './VideoBlock.css';
const RECORD_URL = 'https://www.youtube.com/embed/';
const STREAM_URL = 'https://www.youtube.com/embed/live_stream?channel=';
const RECORD_RE = /[0-9A-Za-z_-]{11}/;
const STREAM_RE = /[0-9A-Za-z_-]{23,25}/;
const AUTOPLAY_DELAY = 300;
export const AUTOPLAY_ATTRIBUTES = {
    autoplay: 1,
    mute: 1,
};
const NO_AUTOPLAY_ATTRIBUTES = {
    autoplay: 0,
};
const b = block('VideoBlock');
function getYoutubeVideoSrc(stream, record) {
    if (!stream && !record) {
        return null;
    }
    const [videoLink, url, re] = stream
        ? [stream, STREAM_URL, STREAM_RE]
        : [record, RECORD_URL, RECORD_RE];
    const match = videoLink?.match(re);
    let src;
    if (match && match.length) {
        src = url + match[0];
    }
    return src;
}
export function getHeight(width) {
    return (width / 16) * 9;
}
const VideoBlock = (props) => {
    const { stream, record, videoIframe, attributes, className, id, previewImg, playButton, playButtonId, height, fullscreen, analyticsEvents, autoplay, onImageLoad, } = props;
    const handleAnalytics = useAnalytics(DefaultEventNames.VideoPreview);
    const src = videoIframe ? videoIframe : getYoutubeVideoSrc(stream, record);
    const ref = React.useRef(null);
    const [hidePreview, setHidePreview] = React.useState(false);
    const [currentHeight, setCurrentHeight] = React.useState(height || undefined);
    const fullId = React.useMemo(() => id || uuidv4(), [id]);
    const buttonId = useUniqId();
    const [isPlaying, setIsPlaying] = React.useState(!previewImg);
    const iframeSrc = React.useMemo(() => {
        if (src && isPlaying) {
            try {
                const url = new URL(src);
                const searchParams = getPageSearchParams({
                    ...(attributes || {}),
                    ...(previewImg || autoplay ? AUTOPLAY_ATTRIBUTES : NO_AUTOPLAY_ATTRIBUTES),
                });
                searchParams.forEach((value, key) => {
                    url.searchParams.set(key, value);
                });
                return url.href;
            }
            catch {
                return src;
            }
        }
        return undefined;
    }, [attributes, autoplay, isPlaying, previewImg, src]);
    const onPreviewClick = React.useCallback(() => {
        handleAnalytics(analyticsEvents);
        setIsPlaying(true);
        setTimeout(() => setHidePreview(true), AUTOPLAY_DELAY);
    }, [handleAnalytics, analyticsEvents]);
    const { onKeyDown: onPreviewKeyDown } = useActionHandlers(onPreviewClick);
    React.useEffect(() => {
        const updateSize = debounce(() => {
            setCurrentHeight(ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined);
        }, 100);
        updateSize();
        window.addEventListener('resize', updateSize, { passive: true });
        return () => {
            window.removeEventListener('resize', updateSize);
        };
    }, [height]);
    const iframeContent = React.useMemo(() => {
        return (_jsx("iframe", { id: fullId, src: iframeSrc, width: "100%", height: "100%", title: i18n('iframe-title'), frameBorder: "0", allowFullScreen: true, scrolling: "no", allow: "autoplay; fullscreen; encrypted-media; accelerometer; gyroscope; picture-in-picture; clipboard-write; web-share; screen-wake-lock", loading: "lazy" }));
    }, [fullId, iframeSrc]);
    React.useEffect(() => {
        setHidePreview(false);
    }, [src]);
    if (!src) {
        return null;
    }
    return (_jsxs("div", { className: b(null, className), style: { height: currentHeight }, ref: ref, children: [iframeContent, previewImg && !hidePreview && !fullscreen && (_jsxs("div", { className: b('preview'), onClick: onPreviewClick, onKeyDown: onPreviewKeyDown, role: "button", tabIndex: 0, "aria-labelledby": playButton ? playButtonId : buttonId, children: [_jsx(Image, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper'), onLoad: onImageLoad }), playButton || (_jsx("button", { title: "Play", id: buttonId, className: b('button'), children: _jsx(Icon, { className: b('icon'), data: PlayFill, size: 24 }) }))] }))] }));
};
export default VideoBlock;
//# sourceMappingURL=VideoBlock.js.map
