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";
//1/3
const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  img_block: {
    height: 120,
    padding: 10,
    borderRadius: 5,
    borderStyle: "dotted",
    borderColor: colors.primary,
    justifyContent: "center",
    alignItems: "center",
  },
  floodingLogo: {
    width: 85,
    height: 85,
    marginTop: 30,
    borderRadius: 5,
    borderColor: colors.primary,
    justifyContent: "center",
    alignItems: "center",

  },
})

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 RainSharingDataScreen() {
  const [passable, setPassable] = useState(0);

  return (
    <Screen style={styles.container}>
      <Form
        initialValues={{
          title: "",
          price: "",
          description: "",
          category: null,
          images: [],
        }}
        onSubmit={(values) => submitForm({ ...values, passable, location })}
        validationSchema={validationSchema}
      >
        <View>
          <Text style={{ fontSize: 25, textAlign: 'center', backgroundColor: 'lightgray' }}>
            Enviar uma informação
          </Text>

          <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
            <TouchableNativeFeedback onPress={() => setPassable(0)}>
              <View borderWidth={passable == 0 ? 5 : 0} style={{ alignItems: 'center' }}>
                <Image
                  style={styles.floodingLogo}
                  source={require("../assets/sem_chuva.png")}
                />
                <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Sem chuva</Text>
              </View>
            </TouchableNativeFeedback>

            <TouchableNativeFeedback onPress={() => setPassable(1)}>
              <View borderWidth={passable == 1 ? 5 : 0} style={{ alignItems: 'center' }}>
                <Image
                  style={styles.floodingLogo}
                  source={require("../assets/chuva_peq.png")}
                />
                <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva fraca</Text>
              </View>
            </TouchableNativeFeedback>

            <TouchableNativeFeedback onPress={() => setPassable(2)}>
              <View borderWidth={passable == 2 ? 5 : 0} style={{ alignItems: 'center' }}>
                <Image
                  style={styles.floodingLogo}
                  source={require("../assets/chuva_peq.png")}
                />
                <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva{"\n"}moderada</Text>
              </View>
            </TouchableNativeFeedback>
          </View>

          <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
            <TouchableNativeFeedback onPress={() => setPassable(3)}>
              <View borderWidth={passable == 3 ? 5 : 0} style={{ alignItems: 'center' }}>
                <Image
                  style={styles.floodingLogo}
                  source={require("../assets/chuva_forte.png")}
                />
                <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva forte</Text>
              </View>
            </TouchableNativeFeedback>

            <TouchableNativeFeedback onPress={() => setPassable(4)}>
              <View borderWidth={passable == 4 ? 5 : 0} style={{ alignItems: 'center' }}>
                <Image
                  style={styles.floodingLogo}
                  source={require("../assets/chuva_muito_forte.png")}
                />
                <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva muito{"\n"}forte</Text>
              </View>
            </TouchableNativeFeedback>

            <TouchableNativeFeedback onPress={() => setPassable(5)}>
              <View borderWidth={passable == 5 ? 5 : 0} style={{ alignContent: 'center' }}>
                <Image
                  style={styles.floodingLogo}
                  source={require("../assets/chuva_pancadas.png")}
                />
                <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Pancada de{"\n"}chuva</Text>
              </View>
            </TouchableNativeFeedback>
          </View>
        </View>
        <FormImagePicker backgroundColor="#1976D2" name="images" />

        <Button title="Enviar" backgroundColor="red" width="20" />
      </Form>
    </Screen>
  );
}

export default RainSharingDataScreen;