import {
  Form,
  SubmitButton,
  FormField,
  ErrorMessage,
} from "../components/forms";
import React, { useState, useEffect } from "react";
import { StyleSheet, View, Text, TouchableNativeFeedback } from "react-native";
import Screen from "../components/Screen";
import { dimensions } from "../config/dimensions";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import colors from "../config/colors";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import * as Yup from "yup";
import FormDatePicker from "../components/forms/FormDatePicker";
import moment from "moment";
import { Shadow } from "react-native-shadow-2";
import SearchablePicker from "../components/SearchablePicker";
import { states, statesToCities } from "../assets/cities_states";
import { useFormikContext } from "formik";

const phoneRegex = RegExp(
  /^\(?[\(]?([0-9]{2})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/
);

const validationSchema = Yup.object().shape({
  name: Yup.string()
    .required("O nome é obrigatória")
    .matches(/[a-zA-Z]/, "O nome e só pode conter letras"),
  number: Yup.string()
    .matches(phoneRegex, "Número inválido")
    .required("O número de telefone é obrigatório"),
  password: Yup.string()
    .required("A senha é obrigatória")
    .min(8, "Senha muito curta, minimo 8 caracteres")
    .matches(/[a-zA-Z]/, "A senha só pode conter letras"),
  confirmPassword: Yup.string()
    .required("A senha é obrigatória")
    .min(8, "Senha muito curta, minimo 8 caracteres")
    .matches(/[a-zA-Z]/, "A senha só pode conter letras"),
  state: Yup.string().required("O estado é obrigatório"),
  institutionName: Yup.string(),
  secQuestionAns: Yup.string()
    .required("A resposta da pergunta de segurança é obrigatória")
    .max(255),
});

function LocalDatePicker({ date, setDate, _moment }) {
  const formatDate = () => date.format("DD/MM/YYYY");

  return (
    <View flex={1}>
      <FormDatePicker
        onDateChange={(value) => setDate(value)}
        minimumDate={new Date(moment().subtract(110, "year"))}
        date={date}
      >
        <View style={[styles.dateInput, { flex: 1, paddingRight: 2 }]}>
          <Shadow
            offset={[0, 3]}
            distance={3}
            radius={4}
            startColor="rgba(0, 0, 0, 0.15)"
            paintInside={true}
            viewStyle={{ width: "100%", height: 48 }}
          >
            <View
              style={{
                paddingLeft: 12,
                backgroundColor: colors.white,
                height: 48,
                borderColor: colors.grayBG,
                borderWidth: 1,
                borderRadius: 4,
                flexDirection: "row",
                alignItems: "center",
              }}
            >
              <Text
                style={{
                  color: colors.medium,
                  fontSize: 18,
                }}
              >
                {date != _moment
                  ? formatDate()
                  : "Selecione a data de nascimento"}
              </Text>
            </View>
          </Shadow>
        </View>
      </FormDatePicker>
    </View>
  );
}

function GenderPicker({ name }) {
  const [items, setItems] = useState([
    { value: "Feminino", label: "Feminino" },
    { value: "Masculino", label: "Masculino" },
    { value: "Prefiro não dizer", label: "Prefiro não dizer" },
  ]);
  return (
    <SearchablePicker
      name={name}
      items={items}
      setItems={setItems}
      formPlaceholder={"Selecione o seu gênero"}
      searchPlaceholder={"Busca..."}
    />
  );
}

function InstitutionPicker({ name }) {
  const [items, setItems] = useState([
    { value: "Escola", label: "Escola" },
    { value: "Defesa civil", label: "Defesa civil" },
    { value: "Não governamental", label: "Não governamental" },
    { value: "Outra", label: "Outra" },
    { value: "Nenhuma", label: "Nenhuma" },
  ]);
  return (
    <SearchablePicker
      name={name}
      items={items}
      setItems={setItems}
      formPlaceholder={"Seleciona o tipo da instituição"}
      searchPlaceholder={"Busca..."}
    />
  );
}

function StatePicker({ name }) {
  const [items, setItems] = useState(states);
  return (
    <SearchablePicker
      name={name}
      items={items}
      setItems={setItems}
      formPlaceholder={"Selecione o seu estado"}
      searchPlaceholder={"Busca..."}
    />
  );
}

function CityPicker({ name }) {
  const { values } = useFormikContext();
  const state = values["state"];

  useEffect(() => {
    state && setItems(statesToCities[state].cities);
  }, [state]);

  const [items, setItems] = useState([]);

  return (
    <SearchablePicker
      name={name}
      items={items}
      setItems={setItems}
      formPlaceholder={"Selecione a sua cidade"}
      nothingToShow={
        state
          ? "Não encontramos nada com esse termo"
          : "Selecione o Estado primeiro"
      }
      searchPlaceholder={"Busca..."}
    />
  );
}

function SecQuestionPicker({ name }) {
  const [items, setItems] = useState([
    { value: "a", label: "Qual a sua cor predileta?" },
    { value: "s", label: "Qual foi o seu livro predileto?" },
    { value: "d", label: "Qual o nome da rua em que você cresceu?" },
    { value: "f", label: "Qual o nome do seu bicho de estimação predileto?" },
    { value: "g", label: "Qual a sua comida predileta?" },
    { value: "h", label: "Qual cidade você nasceu?" },
    { value: "j", label: "Qual é o seu país preferido?" },
    { value: "k", label: "Qual é a sua marca de carro predileto?" },
  ]);

  return (
    <SearchablePicker
      name={name}
      items={items}
      setItems={setItems}
      formPlaceholder={"Selecione a pergunta de segurança"}
      searchPlaceholder={"Busca..."}
      marginLeft={2}
    />
  );
}

export default function RegisterScreen(props) {
  const _moment = moment();
  const [date, setDate] = useState(_moment);
  const [singUpFailed, setSingUpFailed] = useState(false);

  const comparePassword = (password, confirmPassword) => {
    if (password !== confirmPassword) {
      setSingUpFailed(true);
    } else {
      setSingUpFailed(false);
    }
  };

  return (
    <Screen style={styles.containter}>
      <Form
        initialValues={{
          name: "",
          number: "",
          password: "",
          confirmPassword: "",
          gender: "",
          institutionName: "",
          secQuestionAns: "",
          gender: "",
          state: "",
          city: "",
          institution: "",
          secQuestion: "",
        }}
        onSubmit={(form) => {
          comparePassword(form.password, form.confirmPassword);
          console.log("cadastro ainda não implementado");
          console.log("Forms values: \n" + JSON.stringify(form));
        }}
        validationSchema={validationSchema}
      >
        <View
          style={{ flexDirection: "column", justifyContent: "center", flex: 1 }}
        >
          <KeyboardAwareScrollView scrollEnabled={true}>
            <Text style={styles.labelStyle}>Apelido de usuário*</Text>

            <View style={styles.iconField}>
              <MaterialCommunityIcons
                name="account"
                size={25}
                color={colors.primary}
              />
              <FormField
                paddingRight={2}
                flex={1}
                maxLength={12}
                name="name"
                numberOfLines={2}
                placeholder="Nome Completo"
              />
            </View>

            <Text style={styles.labelStyle}>Número do telefone:*</Text>
            <View style={styles.iconField}>
              <MaterialCommunityIcons
                name="phone"
                size={25}
                color={colors.primary}
              />
              <FormField
                flex={1}
                maxLength={12}
                name="number"
                numberOfLines={2}
                placeholder="Número de telefone celular"
                paddingRight={2}
              />
            </View>

            <Text style={styles.labelStyle}>Senha:*</Text>
            <View style={styles.iconField}>
              <MaterialCommunityIcons
                name="lock"
                size={25}
                color={colors.primary}
              />
              <FormField
                flex={1}
                maxLength={12}
                name="password"
                secureTextEntry={true}
                numberOfLines={2}
                placeholder="Senha"
                paddingRight={2}
              />
            </View>

            <Text style={styles.labelStyle}>Confirmar senha:*</Text>
            <View style={styles.iconField}>
              <MaterialCommunityIcons
                name="lock"
                size={25}
                color={colors.primary}
              />
              <FormField
                flex={1}
                maxLength={12}
                name="confirmPassword"
                secureTextEntry={true}
                numberOfLines={2}
                placeholder="Repetir a senha"
                paddingRight={2}
              />
            </View>
            <ErrorMessage
              error="As senhas não correspondem"
              visible={singUpFailed}
            />

            <Text style={styles.labelStyle}>Data de nascimento:</Text>
            <View style={styles.iconField}>
              <MaterialCommunityIcons
                name="calendar-today"
                size={25}
                color={colors.primary}
              />
              <LocalDatePicker
                date={date}
                setDate={setDate}
                _moment={_moment}
              />
            </View>

            <Text style={styles.labelStyle}>Gênero:</Text>
            <View style={[styles.iconField]}>
              <MaterialCommunityIcons
                name="account"
                size={25}
                color={colors.primary}
              />
              <GenderPicker name="gender" />
            </View>

            <Text style={styles.labelStyle}>Estado*:</Text>
            <View style={[styles.iconField]}>
              <MaterialCommunityIcons
                name="map-marker"
                size={25}
                color={colors.primary}
              />
              <StatePicker name="state" />
            </View>

            <Text style={styles.labelStyle}>Cidade*:</Text>
            <View style={[styles.iconField]}>
              <MaterialCommunityIcons
                name="map-marker"
                size={25}
                color={colors.primary}
              />
              <CityPicker name={"city"} />
            </View>

            <Text style={styles.labelStyle}>Tipo de instituição:</Text>
            <View style={[styles.iconField]}>
              <MaterialCommunityIcons
                name="bank"
                size={25}
                color={colors.primary}
              />
              <InstitutionPicker name="institution" />
            </View>

            <Text style={styles.labelStyle}>Nome da instituição</Text>

            <View style={styles.iconField}>
              <MaterialCommunityIcons
                name="bank"
                size={25}
                color={colors.primary}
              />
              <FormField
                flex={1}
                maxLength={12}
                name="institutionName"
                numberOfLines={2}
                placeholder="Digite o nome da instituição"
                paddingRight={2}
              />
            </View>

            <Text style={styles.labelStyle}>Pergunta de segurança*:</Text>
            <View
              style={{
                flexDirection: "row",
                marginTop: 12,
                marginBottom: 24,
              }}
            >
              <SecQuestionPicker name="secQuestion" />
            </View>

            <Text style={styles.labelStyle}>Resposta*:</Text>
            <View style={styles.iconField}>
              <FormField
                flex={1}
                maxLength={255}
                name="secQuestionAns"
                numberOfLines={2}
                placeholder="Degite a resposta à sua pergunta"
                paddingRight={2}
                paddingLeft={2}
              />
            </View>

            <SubmitButton
              flex={1}
              title="cadastrar"
              backgroundColor={colors.primary}
              marginTop={10}
            />

            <TouchableNativeFeedback
              onPress={() => {
                props.navigation.goBack();
              }}
            >
              <View style={{ flexDirection: "row", alignSelf: "center" }}>
                <Text>Já tem uma conta? </Text>
                <Text style={{ color: colors.lightBlue }}>Faça Login</Text>
              </View>
            </TouchableNativeFeedback>
          </KeyboardAwareScrollView>
        </View>
      </Form>
    </Screen>
  );
}

const styles = StyleSheet.create({
  containter: {
    flex: 1,
    justifyContent: "center",
    textAlign: "center",
    paddingHorizontal: 10,
  },
  labelStyle: {
    fontSize: dimensions.text.secondary,
    fontWeight: "bold",
    textAlign: "left",
    color: colors.secondary,
    marginTop: 10,
  },
  iconField: {
    width: "100%",
    flex: 1,
    alignItems: "center",
    flexDirection: "row",
    marginTop: 12,
    marginBottom: 24,
  },
  dateInput: {
    paddingLeft: 16,
  },
});