import React, { useState, useContext, useEffect } from "react";
import { StyleSheet, Text, View, ScrollView, PixelRatio } from "react-native";
import * as Yup from "yup";
import {
  Form,
  FormField,
  FormPicker as Picker,
  SubmitButton,
} from "../components/forms";
import Screen from "../components/Screen";
import useLocation from "../hooks/useLocation";
import FormImagePicker from "../components/forms/FormImagePicker";
import { insertPluviometerData } from "../database/databaseLoader";
import { showMessage } from "react-native-flash-message";
import { dimensions, scaleDimsFromWidth } from "../config/dimensions";
import FormDatePicker from "../components/forms/FormDatePicker";
import colors from "../config/colors/";
import moment from "moment";
import FormLocationPicker from "../components/forms/FormLocationPicker";
import { TouchableOpacity } from "react-native-gesture-handler";
import { EventLocationContext } from "../context/EventLocationContext";

const dims = scaleDimsFromWidth(85, 85, 25);

const validationSchema = Yup.object().shape({
  pluviometer: Yup.number()
    .required("Campo obrigatório")
    .min(0, "O valor deve ser maior ou igual a 0.")
    .max(999)
    .label("pluviometer"),
  //data: Yup.string().required("Campo obrigatório. Por favor, selecione a data"),
  images: Yup.array(),
  description: Yup.string().label("Description"),
});

function PluviometerSharingDataScreen(props) {
  const context = useContext(EventLocationContext);

  const amount = 2;

  useEffect(() => {
    context.defaultLocation();
  }, []);
  const location = context.eventCoordinates;
  const address = context.eventLocation;

  const [dateTime, setDateTime] = useState(moment());
  const [time, setTime] = useState(moment());

  return (
    <Screen style={styles.container}>
      <ScrollView>
        <Form
          initialValues={{
            pluviometer: "",
            description: "",
            images: [],
          }}
          onSubmit={(values) => {
            insertPluviometerData({ ...values, dateTime, time });
            showMessage({
              message: "Informação enviada!",
              duration: 3000,
              icon: "success",
              type: "success",
            });
            props.navigation.navigate("Home");
          }}
          validationSchema={validationSchema}
        >
          <View style={{ flex: 1 }}>
            <Text style={styles.labelStyle}>Quantidade de chuva (mm):</Text>
            <FormField
              keyboardType="decimal-pad"
              maxLength={200}
              name="pluviometer"
              placeholder="Digite a quantidade de chuva"
            />
          </View>

          <FormImagePicker
            backgroundColor={colors.primary}
            name="images"
            styles={{ width: 50 }}
          />

          <View
            style={{
              flex: 1,
              flexDirection: "column",
              justifyContent: "space-between",
              alignContent: "flex-start",
            }}
          >
            {/*Data da coleta:*/}
            <View style={{ flex: 1 }}>
              <FormDatePicker
                textStyle={{
                  borderColor: colors.gray,
                  borderWidth: 3,
                }}
                defaultDate={new Date()}
                onDateChange={(value) => setDateTime(value)}
                onTimeChange={(value) => setTime(value)}
              />
            </View>
            {/*Local do evento:*/}
            <View style={{ flex: 1 }}>
              <TouchableOpacity
                onPress={() => props.navigation.navigate("FormMap")}
              >
                <FormLocationPicker />
              </TouchableOpacity>
            </View>
          </View>
          <View style={{ flex: 1 }}>
            <Text style={styles.labelStyle}>Comentário:</Text>
            <FormField
              maxLength={255}
              multiline
              name="description"
              numberOfLines={3}
              placeholder="Escreva um comentário (Opcional)..."
            />
          </View>
          <SubmitButton title="Enviar" style={{ marginBottom: 100 }} />
          <View style={{ flex: 1 }}></View>
        </Form>
      </ScrollView>
    </Screen>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 10,
    flex: 1,
  },
  image: {
    width: dims.width * 0.8,
    height: dims.height * 0.8,
    justifyContent: "center",
    alignItems: "center",
  },
  labelStyle: {
    fontSize: dimensions.text.secondary,
    fontWeight: "bold",
    textAlign: "left",
    color: colors.lightBlue,
  },
});

export default PluviometerSharingDataScreen;