import React, { useContext, useEffect, useState, useRef } from "react";
import { View, Image, ImageBackground, NativeModules, Platform, NativeEventEmitter, ActivityIndicator } from "react-native";
import { CometChatContext } from "../../CometChatContext";
import { VideoBubbleStyle } from "./VideoBubbleStyle";
import { defaultPlayIcon, defaultThumbnail } from "./resources";
import { Style } from "./style";
import { CometChatVideoPlayer } from "../CometChatVideoPlayer";
const { FileManager } = NativeModules;
const eventEmitter = new NativeEventEmitter(FileManager);
let statusListener;
export const CometChatVideoBubble = (props) => {
    const { videoUrl, thumbnailUrl, placeholderImage, style, playIcon, onPress, playerPlayIcon, playerPauseIcon, playerBackIcon, playerVolumeIcon, } = props;
    const { theme } = useContext(CometChatContext);
    const [isOpening, setOpening] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [isVideoPlayerVisible, setIsVideoPlayerVisible] = useState(false);
    const _style = new VideoBubbleStyle({
        backgroundColor: theme?.palette.getBackgroundColor(),
        playIconTint: theme?.palette.getSecondary(),
        ...style
    });
    const { height, width, backgroundColor, border, borderRadius, playIconTint, playIconBackgroundColor } = _style;
    const getFileName = (url) => {
        return (url.substring(url.lastIndexOf("/") + 1, url.length)).replace(" ", "_");
    };
    const playVideo = () => {
        if (isOpening) {
            return;
        }
        if (onPress) {
            onPress(videoUrl);
            return;
        }
        if (!videoUrl)
            return;
        setIsLoading(true);
        setIsVideoPlayerVisible(true);
    };
    useEffect(() => {
        statusListener = eventEmitter.addListener("status", (data) => {
            if (data['url'] == videoUrl && data['state'] == "downloading") {
                setOpening(true);
            }
            if (data['url'] == videoUrl && data['state'] == "opening") {
                setOpening(false);
            }
        });
        return () => {
            statusListener.remove();
        };
    }, []);
    const pressTime = useRef(0);
    const handleTouchStart = () => {
        pressTime.current = Date.now();
    };
    const handleTouchEnd = () => {
        if (pressTime.current === null && Platform.OS === "ios")
            return;
        const endTime = Date.now();
        const pressDuration = endTime - pressTime.current;
        if (pressDuration < 500) {
            playVideo();
        }
    };
    const onTouchMove = () => {
        if (Platform.OS === "ios") {
            pressTime.current = null;
        }
    };
    return (<>
            <CometChatVideoPlayer videoUri={videoUrl} isVisible={isVideoPlayerVisible} onClose={() => {
            setIsLoading(false);
            setIsVideoPlayerVisible(false);
        }} onLoad={() => setIsLoading(false)} loadingIconColor={style.playerLoadingIconColor} playIcon={playerPlayIcon} playIconColor={style.playerPlayIconColor} pauseIcon={playerPauseIcon} pauseIconColor={style.playerPauseIconColor} backIcon={playerBackIcon} backIconColor={style.playerBackIconColor} volumeIcon={playerVolumeIcon} volumeIconColor={style.playerVolumeIconColor}/>
            <ImageBackground source={(typeof thumbnailUrl === "object" ? thumbnailUrl?.uri : thumbnailUrl) || placeholderImage || defaultThumbnail} resizeMode={"cover"} style={{ backgroundColor, ...border, borderRadius, height, width, overflow: "hidden" }}>
                <View onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd} onTouchMove={onTouchMove} style={[Style.playIconPosition, { backgroundColor: playIconBackgroundColor, borderRadius }]}>
                    {isLoading ? <ActivityIndicator size={"small"} color={playIconTint}/>
            : <Image source={playIcon || defaultPlayIcon} style={{ tintColor: playIconTint }}/>}
                </View>
            </ImageBackground>
        </>);
};
//# sourceMappingURL=CometChatVideoBubble.js.map