import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  SafeAreaView,
  View,
  TouchableOpacity,
  TextInput as Input,
} from "react-native";
import { Appbar, Button, useTheme } from "react-native-paper";
const globalStyles = require("../../constants/globalstyles");

function Settings({ navigation: { navigate } }) {
  const { colors } = useTheme();
  const [disName, setDisName] = useState("");

  return (
    <>
      <Appbar.Header style={{ backgroundColor: "#2667ff" }}>
        <Appbar.Action icon="arrow-left" onPress={() => navigate("Home")} />
        <Appbar.Content
          title="Settings"
          titleStyle={{ fontSize: 24 }}
          subtitleStyle={{ fontSize: 12 }}
        />
      </Appbar.Header>

      <SafeAreaView style={globalStyles.background}>
        <View style={globalStyles.container}>
          <View
            style={{
              display: "flex",
              flexDirection: "column",
              marginBottom: 12,
            }}
          >
            <View
              style={{
                display: "flex",
                padding: 8,
                backgroundColor: "#fff",
              }}
            >
              <View style={{ marginBottom: 4 }}>
                <Text
                  style={{
                    fontWeight: "bold",
                    fontSize: 16,
                    marginBottom: 2,
                    color: colors.primary,
                  }}
                >
                  Display Name
                </Text>
                <Text style={{ color: colors.dark, fontWeight: "300" }}>
                  What would you like us to call you?
                </Text>
              </View>
              <Input
                value={disName}
                onChangeText={(text) => {
                  setDisName(text);
                }}
                style={{
                  color: colors.dark,
                  backgroundColor: colors.secondary,
                  padding: 8,
                }}
              />
            </View>
          </View>

          <View
            style={{
              display: "flex",
              padding: 8,
              backgroundColor: "#fff",
            }}
          >
            <View style={{ marginBottom: 4 }}>
              <Text
                style={{
                  fontWeight: "bold",
                  fontSize: 16,
                  marginBottom: 2,
                  color: colors.primary,
                }}
              >
                Notification Settings
              </Text>
              <Text style={{ color: colors.dark, fontWeight: "300" }}>
                Get reminders before events are due.
              </Text>
            </View>
            <Input
              value={disName}
              onChangeText={(text) => {
                setDisName(text);
              }}
              style={{
                color: colors.dark,
                backgroundColor: colors.secondary,
                padding: 8,
              }}
            />
          </View>
        </View>
        <View style={{ marginLeft: 40, marginRight: 40 }}>
          <Button
            color="#2667ff"
            mode="contained"
            style={{
              position: "absolute",
              bottom: 0,
              marginLeft: "auto",
              marginRight: "auto",
              left: 0,
              right: 0,
              paddingTop: 5,
              paddingBottom: 5,
              marginBottom: 8,
            }}
          >
            Save Changes
          </Button>
        </View>
      </SafeAreaView>
    </>
  );
}

export default Settings;