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 } from 'react';
9import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
10import * as LogBoxData from '../Data/LogBoxData';
11import * as LogBoxStyle from '../UI/LogBoxStyle';
12import { ErrorToastMessage } from './ErrorToastMessage';
13function useSymbolicatedLog(log) {
14    // Eagerly symbolicate so the stack is available when pressing to inspect.
15    useEffect(() => {
16        LogBoxData.symbolicateLogLazy('stack', log);
17        LogBoxData.symbolicateLogLazy('component', log);
18    }, [log]);
19}
20export function ErrorToast(props) {
21    const { totalLogCount, level, log } = props;
22    useSymbolicatedLog(log);
23    return (React.createElement(View, { style: toastStyles.container },
24        React.createElement(Pressable, { style: { flex: 1 }, onPress: props.onPressOpen }, ({
25        /** @ts-expect-error: react-native types are broken. */
26        hovered, pressed, }) => (React.createElement(View, { style: [
27                toastStyles.press,
28                {
29                    // @ts-expect-error: web-only type
30                    transitionDuration: '150ms',
31                    backgroundColor: pressed
32                        ? '#323232'
33                        : hovered
34                            ? '#111111'
35                            : LogBoxStyle.getBackgroundColor(),
36                },
37            ] },
38            React.createElement(Count, { count: totalLogCount, level: level }),
39            React.createElement(ErrorToastMessage, { message: log.message }),
40            React.createElement(Dismiss, { onPress: props.onPressDismiss }))))));
41}
42function Count({ count, level }) {
43    return (React.createElement(View, { style: [countStyles.inside, countStyles[level]] },
44        React.createElement(Text, { style: countStyles.text }, count <= 1 ? '!' : count)));
45}
46function Dismiss({ onPress }) {
47    return (React.createElement(Pressable, { style: {
48            marginLeft: 5,
49        }, hitSlop: {
50            top: 12,
51            right: 10,
52            bottom: 12,
53            left: 10,
54        }, onPress: onPress }, ({
55    /** @ts-expect-error: react-native types are broken. */
56    hovered, pressed, }) => (React.createElement(View, { style: [dismissStyles.press, hovered && { opacity: 0.8 }, pressed && { opacity: 0.5 }] },
57        React.createElement(Image, { source: require('@expo/metro-runtime/assets/close.png'), style: dismissStyles.image })))));
58}
59const countStyles = StyleSheet.create({
60    warn: {
61        backgroundColor: LogBoxStyle.getWarningColor(1),
62    },
63    error: {
64        backgroundColor: LogBoxStyle.getErrorColor(1),
65    },
66    log: {
67        backgroundColor: LogBoxStyle.getLogColor(1),
68    },
69    inside: {
70        marginRight: 8,
71        minWidth: 22,
72        aspectRatio: 1,
73        paddingHorizontal: 4,
74        borderRadius: 11,
75        justifyContent: 'center',
76        alignItems: 'center',
77    },
78    text: {
79        color: LogBoxStyle.getTextColor(1),
80        fontSize: 14,
81        lineHeight: 18,
82        textAlign: 'center',
83        fontWeight: '600',
84        textShadow: `0px 0px 3px ${LogBoxStyle.getBackgroundColor(0.8)}`,
85    },
86});
87const dismissStyles = StyleSheet.create({
88    press: {
89        backgroundColor: '#323232',
90        height: 20,
91        width: 20,
92        borderRadius: 25,
93        alignItems: 'center',
94        justifyContent: 'center',
95    },
96    image: {
97        height: 8,
98        width: 8,
99    },
100});
101const toastStyles = StyleSheet.create({
102    container: {
103        height: 48,
104        justifyContent: 'center',
105        marginBottom: 4,
106    },
107    press: {
108        borderWidth: 1,
109        borderRadius: 8,
110        overflow: 'hidden',
111        flexDirection: 'row',
112        alignItems: 'center',
113        borderColor: '#323232',
114        backgroundColor: LogBoxStyle.getBackgroundColor(),
115        flex: 1,
116        paddingHorizontal: 12,
117    },
118});
119//# sourceMappingURL=ErrorToast.js.map