import React, { useState } from "react";
import { StyleSheet, Text, Image, View } 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 } from "../config/dimensions";
import { TouchableNativeFeedback } 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";

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

const validationSchema = Yup.object().shape({
  images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"),
  description: Yup.string()
    .label("Description")
    .required("Por favor, forneça uma descrição"),
});

function SharingFloodZonesScreen(props) {
  const [passable, setPassable] = useState(0);
  const location = useLocation();

  return (
    <Screen style={styles.container}>
      <Text
        style={{
          fontSize: 18,
          fontWeight: "bold",
          color: colors.primary,
          textAlign: "center",
          marginBottom: 30,
        }}
      >
        Pontos de alagamento
      </Text>
      <KeyboardAwareScrollView
        resetScrollToCoords={{ x: 0, y: 0 }}
        contentContainerStyle={styles.container}
        scrollEnabled={true}
      >
        <Form
          initialValues={{
            images: [],
            description: "",
          }}
          onSubmit={(values) => {
            submitForm({ ...values, passable, location });
            showMessage({
              message: "Informação enviada!",
              duration: 1950,
              icon: "success",
              type: "success",
            });
            props.navigation.goBack(null);
          }}
          validationSchema={validationSchema}
        >
          <View style={styles.imgs_container}>
            <TouchableNativeFeedback onPress={() => setPassable(1)}>
              <View
                style={styles.img_block}
                borderWidth={passable == 1 ? borderWidth : 0}
              >
                <Image
                  style={styles.image}
                  source={require("../assets/floodZonesAssets/passable_icon.png")}
                />
                <Text style={styles.text}>Transitável</Text>
              </View>
            </TouchableNativeFeedback>

            <TouchableNativeFeedback onPress={() => setPassable(0)}>
              <View
                style={styles.img_block}
                borderWidth={passable == 0 ? borderWidth : 0}
              >
                <Image
                  style={styles.image}
                  source={require("../assets/floodZonesAssets/not_passable_icon.png")}
                />
                <Text style={styles.text}>Intransitável</Text>
              </View>
            </TouchableNativeFeedback>
          </View>

          <FormImagePicker name="images" height={10} />
          <FormField
            maxLength={255}
            multiline
            name="description"
            numberOfLines={3}
            placeholder="Descrição"
          />
          <SubmitButton title="Enviar" backgroundColor={colors.primary} />
        </Form>
      </KeyboardAwareScrollView>
    </Screen>
  );
}
const borderWidth = 3;

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

  header: {
    fontSize: 18,
    color: colors.primary,
    fontWeight: "500",
  },
  image: {
    ...scaleDimsFromWidth(150, 80, 35.0),
    resizeMode: "contain",
  },
  img_block: {
    padding: 10,
    borderRadius: 5,
    borderStyle: "dotted",
    borderColor: colors.primary,
    justifyContent: "center",
    alignItems: "center",
  },
  imgs_container: {
    alignSelf: "center",
    flexGrow: 1,
    flexDirection: "row",
    justifyContent: "space-between",
  },

  text: {
    fontSize: 14,
  },
});

export default SharingFloodZonesScreen;