1/**
2 * Copyright (c) 650 Industries.
3 * Copyright (c) Meta Platforms, Inc. and affiliates.
4 *
5 * This source code is licensed under the MIT license found in the
6 * LICENSE file in the root directory of this source tree.
7 */
8import React, { useEffect, useState } from 'react';
9import { Animated, Easing, StyleSheet, Text } from 'react-native';
10import { LogBoxButton } from '../UI/LogBoxButton';
11import * as LogBoxStyle from '../UI/LogBoxStyle';
12export function LogBoxInspectorSourceMapStatus(props) {
13    const [state, setState] = useState({
14        animation: null,
15        rotate: null,
16    });
17    useEffect(() => {
18        if (props.status === 'PENDING') {
19            if (state.animation == null) {
20                const animated = new Animated.Value(0);
21                const animation = Animated.loop(Animated.timing(animated, {
22                    duration: 2000,
23                    easing: Easing.linear,
24                    toValue: 1,
25                    useNativeDriver: true,
26                }));
27                setState({
28                    animation,
29                    rotate: animated.interpolate({
30                        inputRange: [0, 1],
31                        outputRange: ['0deg', '360deg'],
32                    }),
33                });
34                animation.start();
35            }
36        }
37        else {
38            if (state.animation != null) {
39                state.animation.stop();
40                setState({
41                    animation: null,
42                    rotate: null,
43                });
44            }
45        }
46        return () => {
47            if (state.animation != null) {
48                state.animation.stop();
49            }
50        };
51    }, [props.status, state.animation]);
52    let image;
53    let color;
54    switch (props.status) {
55        case 'FAILED':
56            image = require('@expo/metro-runtime/assets/alert-triangle.png');
57            color = LogBoxStyle.getErrorColor(1);
58            break;
59        case 'PENDING':
60            image = require('@expo/metro-runtime/assets/loader.png');
61            color = LogBoxStyle.getWarningColor(1);
62            break;
63    }
64    if (props.status === 'COMPLETE' || image == null) {
65        return null;
66    }
67    return (React.createElement(LogBoxButton, { backgroundColor: {
68            default: 'transparent',
69            pressed: LogBoxStyle.getBackgroundColor(1),
70        }, hitSlop: { bottom: 8, left: 8, right: 8, top: 8 }, onPress: props.onPress, style: styles.root },
71        React.createElement(Animated.Image, { source: image, tintColor: color ?? LogBoxStyle.getTextColor(0.4), style: [
72                styles.image,
73                state.rotate == null || props.status !== 'PENDING'
74                    ? null
75                    : { transform: [{ rotate: state.rotate }] },
76            ] }),
77        React.createElement(Text, { style: [styles.text, { color }] }, "Source Map")));
78}
79const styles = StyleSheet.create({
80    root: {
81        alignItems: 'center',
82        borderRadius: 12,
83        flexDirection: 'row',
84        height: 24,
85        paddingHorizontal: 8,
86    },
87    image: {
88        height: 14,
89        width: 16,
90        marginEnd: 4,
91    },
92    text: {
93        fontSize: 12,
94        includeFontPadding: false,
95        lineHeight: 16,
96    },
97});
98//# sourceMappingURL=LogBoxInspectorSourceMapStatus.js.map