import React, { useState } from "react";
import { StyleSheet, Text, SafeAreaView, View } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { Button } from "react-native-paper";

export default function Welcome({ navigation: { navigate } }) {
  const welcomeViewed = async () => {
    try {
      await AsyncStorage.setItem("welcomeViewed", JSON.stringify(true));
      navigate("App");
    } catch (e) {
      alert(e);
    }
  };

  const splashViewed = async () => {
    let splashViewed = await AsyncStorage.getItem("welcomeViewed");
    console.log(splashViewed);
  };

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: "#ccdbfd" }}>
      <View style={{ flex: 1, marginLeft: 15, marginRight: 15, marginTop: 20 }}>
        <View
          style={{
            display: "flex",
            marginTop: 40,
            alignItems: "center",
          }}
        >
          <Text
            style={{
              color: "white",
              fontWeight: "bold",
              fontSize: 24,
            }}
          >
            Welcome to
          </Text>
          <Text
            style={{
              color: "#fff",
              fontWeight: "bold",
              fontSize: 72,
              letterSpacing: 3,
            }}
          >
            Arrived.
          </Text>
        </View>

        <View style={{ display: "flex", alignItems: "center" }}>
          <View style={styles.infoPanel}>
            <Text
              style={{
                color: "#03045e",
                fontWeight: "bold",
                fontSize: 16,
                textAlign: "center",
              }}
            >
              Add and manage your classes
            </Text>
          </View>
          <View style={styles.infoPanel}>
            <Text
              style={{
                color: "#03045e",
                fontWeight: "bold",
                fontSize: 16,
                textAlign: "center",
              }}
            >
              Recieve notifications for classes & assignments
            </Text>
          </View>
          <View style={styles.infoPanel}>
            <Text
              style={{
                color: "#03045e",
                fontWeight: "bold",
                fontSize: 16,
                textAlign: "center",
              }}
            >
              Mark assignments as complete
            </Text>
          </View>
        </View>

        <View style={{ display: "flex", marginHorizontal: 120 }}>
          <Button
            icon="chevron-right"
            mode="contained"
            style={{ marginTop: 50, backgroundColor: "#2667ff" }}
            onPress={() => welcomeViewed()}
          >
            <Text style={{ color: "#fff" }}>Bet</Text>
          </Button>
        </View>

        <View style={{ display: "flex", marginTop: 25 }}>
          <Text style={{ color: "#fff", fontWeight: "bold" }}>
            note: i created this app with the purpose of being able to adjust to
            school easier. at this time, i am a freshman attending ucsc
            off-campus, and in my one of my classes I ended up getting 20+
            zeroes LOL i hope this app will benefit me and many others for when
            we move to campus! (:
          </Text>
          <View
            style={{ display: "flex", alignItems: "center", marginTop: 25 }}
          >
            <Text style={{ color: "#03045e", fontWeight: "bold" }}>
              created by David Nguyen
            </Text>
          </View>
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#Bddaf9",
    alignItems: "center",
    justifyContent: "center",
  },
  button: {
    marginRight: 40,
    marginLeft: 40,
    marginTop: 10,
    paddingTop: 10,
    paddingBottom: 10,
    paddingRight: 5,
    paddingLeft: 5,
    backgroundColor: "#3f8efc",
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "#3f8efc",
  },
  infoPanel: {
    backgroundColor: "rgba(255, 255, 255, 0.6)",
    borderRadius: 10,
    marginTop: 20,
    padding: 10,
    width: "100%",
    alignItems: "center",
  },
});