import React, { useState, useEffect, useContext } from "react";
import {
  StyleSheet,
  View,
  Text,
  TextInput as Input,
  TouchableOpacity,
  Keyboard,
  ScrollView,
} from "react-native";
import Modal from "react-native-modal";
import { Button, useTheme } from "react-native-paper";
import DateTimePicker from "@react-native-community/datetimepicker";
import { Calendar } from "react-native-calendars";
import Icon from "react-native-vector-icons/FontAwesome5";
import { MaterialCommunityIcons } from "react-native-vector-icons";

import AsyncStorage from "@react-native-async-storage/async-storage";
import { v4 as uuidv4 } from "uuid";

export default function NewTerm(props) {
  const { colors } = useTheme();

  const [termModalVis, setTermModalVis] = useState(props.shown);
  useEffect(() => {
    setTermModalVis(props.shown);
  }, [props.shown]);
  const closeTermModal = () => {
    setTermModalVis(false);
    setTermName("");
  };

  const [termName, setTermName] = useState("");

  const addNewTerm = () => {};

  return (
    <Modal
      isVisible={termModalVis}
      avoidKeyboard={true}
      hasBackdrop={true}
      backdropColor="black"
      onSwipeComplete={() => {
        closeTermModal();
      }}
      swipeDirection="down"
      style={{
        margin: 0,
      }}
    >
      <View
        style={{
          flex: 1,
          justifyContent: "flex-end",
        }}
      >
        <View
          style={{
            justifyContent: "space-between",
            flexDirection: "row",
            alignItems: "baseline",
            paddingHorizontal: 20,
            paddingVertical: 18,
            backgroundColor: colors.secondary,
            borderColor: colors.secondaryDarker,
            borderBottomWidth: 1,
            borderTopLeftRadius: 20,
            borderTopRightRadius: 20,
          }}
        >
          <TouchableOpacity
            onPress={() => {
              Keyboard.dismiss();
              closeTermModal();
            }}
          >
            <Text
              style={{
                width: 50,
                fontSize: 16,
                color: colors.primary,
                fontWeight: "500",
              }}
            >
              Close
            </Text>
          </TouchableOpacity>
          <Text style={{ color: colors.dark, fontSize: 20, fontWeight: "600" }}>
            New Term
          </Text>
          <TouchableOpacity
            onPress={() => {
              addNewTerm();
            }}
          >
            <Text
              style={{
                width: 50,
                fontSize: 16,
                color: colors.primary,
                fontWeight: "500",
                textAlign: "right",
              }}
            >
              Add
            </Text>
          </TouchableOpacity>
        </View>

        <View style={{ display: "flex", backgroundColor: "#fff" }}>
          <View>
            <Input
              placeholder="Term Name"
              autoFocus={true}
              value={termName}
              onChangeText={(text) => {
                setTermName(text);
                setTermNameErr(false);
              }}
              keyboardType="twitter"
              autoCorrect={false}
              style={{ fontSize: 16, padding: 16 }}
            />
          </View>
        </View>
      </View>
    </Modal>
  );
}