import {
  faCheck,
  faCheckCircle,
  faExclamationCircle,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { StatusBar } from "expo-status-bar";
import {
  Platform,
  SafeAreaView,
  StyleSheet,
  Text,
  View,
  StatusBar as StatusBars,
  Dimensions,
} from "react-native";
import { ToastProvider } from "react-native-toast-notifications";
import Route from "./app/routes/route";

// import WebSocket from "ws";
// import { WebSocket } from 'react-native';

// const ws = new WebSocket('wss://192.168.50.15:4028/');


const height = Dimensions.get("window").height;
const width = Dimensions.get("window").width;

export default function App() {
  // const ws = new WebSocket("ws://localhost:8080");
  return (
    <SafeAreaView style={styles.container}>
      <ToastProvider
        successColor="#98eb00"
        dangerColor="red"
        offsetTop={110}
        // renderType={{
        //   custom_type: (toast) => (
        //     <View style={{padding: 15, backgroundColor: 'grey'}}>
        //       <Text>{toast.message}</Text>
        //     </View>
        //   )
        // }}
        renderToast={(toast) => (
          <View
            style={{
              // padding: 15,
              paddingHorizontal: 25,
              paddingVertical: 10,
              color:
                toast.type === "success"
                  ? "#98eb00"
                  : toast.type === "danger"
                  ? "red"
                  : toast.type === "warning"
                  ? "yellow"
                  : toast.type === "normal"
                  ? "#98eb00"
                  : "red",
              backgroundColor: "#ffff",
              borderWidth: 1,
              borderColor: "#eeee",
              borderRadius: 25,
              flexDirection: "row",
            }}
          >
            <FontAwesomeIcon
              icon={
                toast.type === "success"
                  ? faCheckCircle
                  : toast.type === "danger"
                  ? faExclamationCircle
                  : toast.type === "warning"
                  ? faExclamationCircle
                  : toast.type === "normal"
                  ? faCheck
                  : "red"
              }
              color={
                toast.type === "success"
                  ? "#98eb00"
                  : toast.type === "danger"
                  ? "red"
                  : toast.type === "warning"
                  ? "yellow"
                  : toast.type === "normal"
                  ? "#98eb00"
                  : "red"
              }
              size={20}
            />
            <Text style={{ paddingLeft: 10 }}>{toast.message}</Text>
          </View>
        )}
      >
        <View style={styles.wrapper}>
          <StatusBar style="auto" />
          <Route />
        </View>
      </ToastProvider>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    // flex: 1,
    backgroundColor: "#ffff",
    alignItems: "center",
    // justifyContent: "center",
    height: "100%",
    paddingTop: Platform.OS === "android" ? StatusBars.currentHeight + 10 : "",
  },
  wrapper: {
    height: "100%",
    width: "100%",
    // backgroundColor:"#333"
  },
});