import { Box, HStack, Icon, Spinner, Text, } from '../../themes/components';
import stats from '../../utils/callStats';
import React, { useEffect, useState, useContext } from 'react';
import { useSelector } from 'react-redux';
import { ThemeContext } from 'styled-components';
import borderRadius from '../../themes/foundations/borderRadius';
const NetworkCheck = () => {
    // console.log(stats)
    const [preCallResult, setPreCallResult] = useState(null);
    const peerId = useSelector((state) => state.participant.peerId);
    const userDisplayName = useSelector((state) => state.participant.displayName);
    const { colors } = useContext(ThemeContext);
    useEffect(() => {
        const precallTest = async () => {
            stats.initialize(peerId, userDisplayName);
            // stats.onPreCallTestResults((status, result) => {
            // 	if (status !== 'success') return;
            // 	const callResult = {
            // 		speedIcon: <Icon name="exclamation" color="warning.500" />,
            // 		qualityIcon: <Icon name="exclamation" color="warning.500" />,
            // 	};
            // 	if (result.fractionalLoss !== undefined
            // 		&& result.jitter !== undefined
            // 		&& result.rtt !== undefined) {
            // 		if (result.fractionalLoss < 0.01
            // 			&& result.jitter < 150
            // 			&& result.rtt < 150) {
            // 			callResult.qualityIcon = <Icon name="signal" color="success.500" />;
            // 		} else if (result.fractionalLoss < 0.04
            // 			&& result.jitter < 300
            // 			&& result.rtt < 300) {
            // 			callResult.qualityIcon = <Icon name="signal-cellular-2" color="warning.500" />;
            // 		} else {
            // 			callResult.qualityIcon = <Icon name="signal-cellular-1" color="danger.500" />;
            // 		}
            // 	}
            // 	if (result.throughput !== undefined) {
            // 		if (result.throughput > 2000) {
            // 			callResult.speedIcon = <Icon name="signal" color="success.500" />;
            // 		} else if (result.throughput > 1000) {
            // 			callResult.speedIcon = <Icon name="signal-cellular-2" color="warning.500" />;
            // 		} else {
            // 			callResult.speedIcon = <Icon name="signal-cellular-1" color="danger.500" />;
            // 		}
            // 	}
            // 	setPreCallResult(callResult);
            // });
        };
        // precallTest();
        const timeout = setTimeout(() => {
            setPreCallResult((result) => (result || {
                speedIcon: <Icon name="exclamation" color="warning.500"/>,
                qualityIcon: <Icon name="exclamation" color="warning.500"/>,
            }));
        }, 4000);
        return () => {
            clearTimeout(timeout);
            stats.onPreCallTestResults(() => { });
        };
    }, []);
    return (<Box background="secondary.800" px={4} py={10} borderRadius={borderRadius.small}>
			<HStack justifyContent="space-around">
				<Text py={4}>Network </Text>
				<HStack background="secondary.700" px={4} py={1} borderRadius={borderRadius.small} flexGrow={0.5} justifyContent="space-around">
					<HStack py={4}>
						<Text mr={10}>Speed:</Text>
						{preCallResult ? preCallResult.speedIcon : <Spinner color={colors.textPrimary['100']} size="small"/>}
					</HStack>
					<HStack py={4}>
						<Text mr={10}>Quality:</Text>
						{preCallResult ? preCallResult.qualityIcon : <Spinner color={colors.textPrimary['100']} size="small"/>}
					</HStack>
				</HStack>
			</HStack>
		</Box>);
};
export default NetworkCheck;
//# sourceMappingURL=index.js.map