import React, { useState } from "react";
import { Button, StyleSheet, View } from "react-native";
import * as Yup from "yup";

import {
  Form,
  FormField,
  FormPicker as Picker,
  SubmitButton,
} from "../components/forms";
import CategoryPickerItem from "../components/CategoryPickerItem";
import Screen from "../components/Screen";
import FormImagePicker from "../components/forms/FormImagePicker";
import useLocation from "../hooks/useLocation";
import { Image, Text, TouchableOpacity } from "react-native";
import colors from "../config/colors";
import { TouchableNativeFeedback } from "react-native-gesture-handler";
import { insertRainData } from "../database/databaseLoader";

const validationSchema = Yup.object().shape({
  images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"),
});

const borderWidth = 4;

function RainSharingDataScreen() {
  const [rain, setRain] = useState(0);
  const location = useLocation();

  return (
    <Screen style={styles.container}>
      <Text
        style={{
          fontSize: 18,
          fontWeight: "bold",
          color: "#1976D2",
          textAlign: "center",
          marginBottom: 30,
        }}
      >
        Chuva
      </Text>
      <Form
        initialValues={{
          images: [],
        }}
        onSubmit={(values) => {
          insertRainData({ ...values, rain, location });
          props.navigation.goBack(null);
        }}
        validationSchema={validationSchema}
      >
        <View>
          <View
            style={{ flexDirection: "row", justifyContent: "space-around" }}
          >
            <TouchableNativeFeedback onPress={() => setRain(0)}>
              <View
                borderWidth={rain == 0 ? borderWidth : 0}
                style={styles.img_block}
              >
                <Image
                  style={styles.floodingLogo}
                  source={require("../assets/sem_chuva.png")}
                />
                <Text style={styles.text}>Sem chuva</Text>
              </View>
            </TouchableNativeFeedback>

            <TouchableNativeFeedback onPress={() => setRain(1)}>
              <View
                borderWidth={rain == 1 ? borderWidth : 0}
                style={styles.img_block}
              >
                <Image
                  style={styles.floodingLogo}
                  source={require("../assets/chuva_peq.png")}
                />
                <Text style={styles.text}>Chuva fraca</Text>
              </View>
            </TouchableNativeFeedback>

            <TouchableNativeFeedback onPress={() => setRain(2)}>
              <View
                borderWidth={rain == 2 ? borderWidth : 0}
                style={styles.img_block}
              >
                <Image
                  style={styles.floodingLogo}
                  source={require("../assets/chuva_peq.png")}
                />
                <Text style={styles.text}>Chuva{"\n"}moderada</Text>
              </View>
            </TouchableNativeFeedback>
          </View>

          <View
            style={{ flexDirection: "row", justifyContent: "space-around" }}
          >
            <TouchableNativeFeedback onPress={() => setRain(3)}>
              <View
                borderWidth={rain == 3 ? borderWidth : 0}
                style={styles.img_block}
              >
                <Image
                  style={styles.floodingLogo}
                  source={require("../assets/chuva_forte.png")}
                />
                <Text style={styles.text}>Chuva forte</Text>
              </View>
            </TouchableNativeFeedback>

            <TouchableNativeFeedback onPress={() => setRain(4)}>
              <View
                borderWidth={rain == 4 ? borderWidth : 0}
                style={styles.img_block}
              >
                <Image
                  style={styles.floodingLogo}
                  source={require("../assets/chuva_muito_forte.png")}
                />
                <Text style={styles.text}>Chuva muito{"\n"}forte</Text>
              </View>
            </TouchableNativeFeedback>

            <TouchableNativeFeedback onPress={() => setRain(5)}>
              <View
                borderWidth={rain == 5 ? borderWidth : 0}
                style={styles.img_block}
              >
                <Image
                  style={styles.floodingLogo}
                  source={require("../assets/chuva_pancadas.png")}
                />
                <Text style={styles.text}>Pancada de{"\n"}chuva</Text>
              </View>
            </TouchableNativeFeedback>
          </View>
        </View>
        <FormImagePicker backgroundColor="#1976D2" name="images" />

        <SubmitButton title="Enviar" backgroundColor={colors.primary} />
      </Form>
    </Screen>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 10,
  },
  img_block: {
    borderRadius: 5,
    padding: 10,
    borderStyle: "dotted",
    borderColor: colors.primary,
    alignItems: "center",
    width: 110,
  },
  floodingLogo: {
    width: 85,
    height: 85,
  },
  text: {
    fontSize: 14,
    textAlign: "center",
    marginTop: 10,
  },
});

export default RainSharingDataScreen;