import React, { useState, useContext, useEffect } from "react";
import { StyleSheet, Text, Image, View, PixelRatio } from "react-native";
import * as Yup from "yup";

import { Form, SubmitButton, FormField } from "../components/forms";
import FormImagePicker from "../components/forms/FormImagePicker";
import useLocation from "../hooks/useLocation";
import colors from "../config/colors";
import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
import {
  TouchableNativeFeedback,
  TouchableOpacity,
} from "react-native-gesture-handler";
import { insertFloodZone } from "../database/databaseLoader";
import { showMessage } from "react-native-flash-message";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import Screen from "../components/Screen";
import assets from "../config/assets";
import moment from "moment";
import FormDatePicker from "../components/forms/FormDatePicker";
import FormLocationPicker from "../components/forms/FormLocationPicker";
import { EventLocationContext } from "../context/EventLocationContext";

/*function submitForm(props) {
  console.log(props);
  insertFloodZone(props);
}*/

const validationSchema = Yup.object().shape({
  images: Yup.array(),
  description: Yup.string().label("Description"),
});

function SharingFloodZonesScreen(props) {
  const [passable, setPassable] = useState(-1);
  const [error, setError] = useState(false);
  const [date, setDate] = useState(moment());
  const [time, setTime] = useState(moment());

  const context = useContext(EventLocationContext);
  const address  = context.eventLocation;

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

  return (
    <Screen style={styles.container}>
      <KeyboardAwareScrollView
        resetScrollToCoords={{ x: 0, y: 0 }}
        scrollEnabled={true}
      >
        <Form
          initialValues={{
            images: [],
            description: "",
          }}
          onSubmit={(values) => {
            if (passable == -1) {
              setError(true);
              return;
            }
            insertFloodZone({ ...values, passable, location, date, time, address });
            showMessage({
              message: "Informação enviada!",
              duration: 1950,
              icon: "success",
              type: "success",
            });
            props.navigation.navigate("Home");
          }}
          validationSchema={validationSchema}
        >
          <View style={styles.imgs_container}>
            <TouchableNativeFeedback onPress={() => setPassable(1)}>
              <View>
                {passable == 1 ? (
                  <Image
                    source={assets.floodZones.passable_toggle}
                    style={styles.image}
                  />
                ) : (
                  <Image
                    style={styles.image}
                    source={assets.floodZones.passable_2}
                  />
                )}
              </View>
            </TouchableNativeFeedback>

            <TouchableNativeFeedback onPress={() => setPassable(0)}>
              <View style={styles.img_block}>
                {passable == 0 ? (
                  <Image
                    source={assets.floodZones.notPassable_toggle}
                    style={styles.image}
                  />
                ) : (
                  <Image
                    style={styles.image}
                    source={assets.floodZones.notPassable2}
                  />
                )}
              </View>
            </TouchableNativeFeedback>
          </View>

          {error && passable == -1 && (
            <Text style={styles.error_txt}>Selecione uma opção</Text>
          )}

          <FormImagePicker name="images" height={10} />

          <View
            style={{
              flex: 1,
              flexDirection: "column",
              justifyContent: "space-between",
              alignContent:"flex-start",
            }}
          >
            {/*Data da coleta:*/}
            <View
              style={{ flex: 0.1 }}
            >
              <FormDatePicker
                textStyle={{
                  borderColor: colors.gray,
                  borderWidth: 3,
                }}
                defaultDate={new Date()}
                onDateChange={(value) => setDate(value)}
                onTimeChange={(value) => setTime(value)}
              />
            </View>
            {/*Local do evento:*/}
            <View style={{ flex: 1 }}>
              <TouchableOpacity
                onPress={() => props.navigation.navigate("FormMap")}
              >
                <FormLocationPicker />
              </TouchableOpacity>
            </View>
          </View>

          <FormField
            maxLength={255}
            multiline
            name="description"
            numberOfLines={3}
            placeholder="Descrição"
          />
          <SubmitButton title="Enviar" backgroundColor={colors.primary} />
        </Form>
      </KeyboardAwareScrollView>
    </Screen>
  );
}
const borderWidth = 4;
const dims = scaleDimsFromWidth(93, 106, 30.0);

const styles = StyleSheet.create({
  container: {
    padding: 10,
    backgroundColor: colors.white,
  },

  image: {
    width: dims.width,
    height: dims.height,
    resizeMode: "contain",
  },
  img_block: {
    borderRadius: 5,
    borderStyle: "dotted",
    borderColor: colors.white,
    borderWidth: borderWidth,
    alignItems: "center",
  },
  imgs_container: {
    flexDirection: "row",
    justifyContent: "space-evenly",
  },

  text: {
    paddingTop: 5,
    fontSize: dimensions.text.default,
  },
  error_txt: {
    fontSize: 18,
    color: colors.danger,
  },
});

export default SharingFloodZonesScreen;