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

import { Form, FormPicker as Picker, SubmitButton } from "../components/forms";
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";
import { showMessage } from "react-native-flash-message";
import { scaleDimsFromWidth } from "../config/dimensions";
import assets from "../config/assets";

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

const borderWidth = 4;

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

  return (
    <Screen style={styles.container}>
      <Text
        style={{
          fontSize: 18,
          fontWeight: "bold",
          color: colors.primary,
          textAlign: "center",
          marginBottom: 30,
        }}
      >
        Chuva
      </Text>
      <ScrollView style={styles.container}>
        <Form
          initialValues={{
            images: [],
          }}
          onSubmit={(values) => {
            insertRainData({ ...values, rain, location });
            showMessage({
              message: "Informação enviada!",
              duration: 1950,
              icon: "success",
              type: "success",
              onPress: () => {},
            });
            props.navigation.goBack(null);
          }}
          validationSchema={validationSchema}
        >
          <View>
            <View style={styles.imgs_row}>
              <TouchableNativeFeedback onPress={() => setRain(0)}>
                <View
                  borderColor={rain == 0 ? colors.primary : colors.white}
                  style={styles.img_block}
                >
                  <Image
                    style={styles.floodingLogo}
                    source={assets.rainLevel.rain_0_5}
                  />
                  <Text style={styles.text}>Sem chuva</Text>
                </View>
              </TouchableNativeFeedback>

              <TouchableNativeFeedback onPress={() => setRain(1)}>
                <View
                  borderColor={rain == 1 ? colors.primary : colors.white}
                  style={styles.img_block}
                >
                  <Image
                    style={styles.floodingLogo}
                    source={assets.rainLevel.rain_1_5}
                  />
                  <Text style={styles.text}>Chuva fraca</Text>
                </View>
              </TouchableNativeFeedback>

              <TouchableNativeFeedback onPress={() => setRain(2)}>
                <View
                  borderColor={rain == 2 ? colors.primary : colors.white}
                  style={styles.img_block}
                >
                  <Image
                    style={styles.floodingLogo}
                    source={assets.rainLevel.rain_2_5}
                  />
                  <Text style={styles.text}>Chuva moderada</Text>
                </View>
              </TouchableNativeFeedback>
            </View>

            <View style={styles.imgs_row}>
              <TouchableNativeFeedback onPress={() => setRain(3)}>
                <View
                  borderColor={rain == 3 ? colors.primary : colors.white}
                  style={styles.img_block}
                >
                  <Image
                    style={styles.floodingLogo}
                    source={assets.rainLevel.rain_3_5}
                  />
                  <Text style={styles.text}>Chuva forte</Text>
                </View>
              </TouchableNativeFeedback>

              <TouchableNativeFeedback onPress={() => setRain(4)}>
                <View
                  borderColor={rain == 4 ? colors.primary : colors.white}
                  style={styles.img_block}
                >
                  <Image
                    style={styles.floodingLogo}
                    source={assets.rainLevel.rain_4_5}
                  />
                  <Text style={styles.text}>Chuva muito forte</Text>
                </View>
              </TouchableNativeFeedback>

              <TouchableNativeFeedback onPress={() => setRain(5)}>
                <View
                  borderColor={rain == 5 ? colors.primary : colors.white}
                  style={styles.img_block}
                >
                  <Image
                    style={styles.floodingLogo}
                    source={assets.rainLevel.rain_5_5}
                  />
                  <Text style={styles.text}>Pancada de chuva</Text>
                </View>
              </TouchableNativeFeedback>
            </View>
          </View>
          <FormImagePicker backgroundColor={colors.primary} name="images" />

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

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

const styles = StyleSheet.create({
  container: {
    padding: 10,
    backgroundColor: colors.white,
  },
  img_block: {
    borderRadius: 5,
    padding: 10,
    borderStyle: "dotted",
    borderColor: colors.white,
    borderWidth: borderWidth,
    alignItems: "center",
    width: dims.width,
  },
  floodingLogo: {
    width: dims.width * 0.8,
    height: dims.height * 0.8,
  },
  imgs_row: {
    flexDirection: "row",
    justifyContent: "space-around",
  },
  text: {
    fontSize: 14,
    textAlign: "center",
    marginTop: 10,
  },
});

export default RainSharingDataScreen;