// Metro module 14639 (f14640).
import { useEffect } from "react";
import { ScrollView, TouchableOpacity, View } from "react-native";
import DevSettingsStore from "../../devtools/dev_settings/DevSettingsStore";
import { addDebugLog, useCollectiblesDebugStore } from "../CollectiblesDebugStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useStateFromStores } from "../../../_bundle/Module589";
import { Text } from "../../../design/components/Text/native/Text";
const useStyles = createStyles({
  debugLogContainer: {
    backgroundColor: "rgba(0, 0, 0, 0.8)",
    padding: 10,
    maxHeight: 350,
    width: "100%",
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    zIndex: 9999,
    borderTopWidth: 1,
    borderTopColor: "#ff0000"
  },
  debugLogHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 5
  },
  debugLogText: {
    color: "#00ff00",
    fontSize: 12,
    marginBottom: 2,
    fontFamily: "monospace"
  },
  clearButton: {
    backgroundColor: "#ff0000",
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: Module712.radii.xs
  },
  clearButtonText: {
    color: "#ffffff",
    fontSize: 10,
    fontWeight: "bold"
  }
});
export default function DebugLogView() {
  let collectiblesDebugStore2, styles, stateFromStores;
  const collectiblesDebugStore = useCollectiblesDebugStore((a0) => a0.logs);
  collectiblesDebugStore2 = useCollectiblesDebugStore((a0) => a0.clearLogs);
  styles = useStyles();
  stateFromStores = useStateFromStores([DevSettingsStore], () => DevSettingsStore.get("shop_show_debug_overlay"));
  useEffect(() => {
    if (collectiblesDebugStore.length === 0 && stateFromStores) {
      addDebugLog("Debug log initialized");
    }
  }, [collectiblesDebugStore.length, stateFromStores]);
  if (stateFromStores && collectiblesDebugStore.length !== 0) {
    return <View style={styles.debugLogContainer}>
      <View style={styles.debugLogHeader}>
        <Text variant="text-xs/normal" style={{
          ...styles.debugLogText,
          color: "#ffffff"
        }}>
          Debug Log (
          {collectiblesDebugStore.length}
          {" entries)"}
        </Text>
        <TouchableOpacity onPress={function onPress() {
          collectiblesDebugStore2();
        }} style={styles.clearButton}>
          <Text variant="text-xs/bold" style={styles.clearButtonText}>Clear</Text>
        </TouchableOpacity>
      </View>
      <ScrollView>
        {collectiblesDebugStore.slice(Math.max(0, collectiblesDebugStore.length - 10)).map((item, index) => <Text key={index} variant="text-xs/normal" style={styles.debugLogText}>
          {item}
        </Text>)}
      </ScrollView>
    </View>;
  }
  return null;
};