import {
  Form,
  SubmitButton,
  FormField,
  ErrorMessage,
} from "../components/forms";
import React, { useState, useEffect, useContext } 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";
import Checkbox from "../components/forms/CheckBox";
import {signup, login, userPersonalData} from "../api/auth";
import { AuthContext } from "../auth/context";
import authStorage from "../auth/storage";
import jwdDecode from "jwt-decode";

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ório")
    .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"),
  city: Yup.string().required("A cidade é obrigatória"),
  institutionName: Yup.string(),
  secQuestion: Yup.string().required("Escolha a pergunta de segurança"),
  secQuestionAns: Yup.string()
    .required("A resposta da pergunta de segurança é obrigatória")
    .max(255),
  consent: Yup.bool().equals([true], "Este campo é obrigatório"),
  role: Yup.string(),
});

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: "F", label: "Feminino" },
    { value: "M", label: "Masculino" },
    { value: "N", 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: "E", label: "Escola" },
    { value: "D", label: "Defesa civil" },
    { value: "N", label: "Não governamental" },
    { value: "O", label: "Outra" },
    { value: "X", label: "Nenhuma" },
  ]);
  return (
    <SearchablePicker
      name={name}
      items={items}
      setItems={setItems}
      formPlaceholder={"Selecione 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: "Qual a sua cor predileta?", label: "Qual a sua cor predileta?" },
    {
      value: "Qual é seu livro predileto?",
      label: "Qual é seu livro predileto?",
    },
    {
      value: "Qual o nome da rua em que você cresceu?",
      label: "Qual o nome da rua em que você cresceu?",
    },
    {
      value: "Qual o nome do seu bicho de estimação predileto?",
      label: "Qual o nome do seu bicho de estimação predileto?",
    },
    {
      value: "Qual a sua comida predileta?",
      label: "Qual a sua comida predileta?",
    },
    {
      value: "Qual é o seu país preferido?",
      label: "Qual é o seu país preferido?",
    },
    {
      value: "Qual é a sua marca de carro predileto?",
      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}
    />
  );
}

function RolePicker({ name }) {
  const [items, setItems] = useState([
    { value: "ROLE_INSTITUTION", label: "Responsável" },
    { value: "ROLE_CLIENT", label: "Não responsável" },
  ]);

  return (
    <SearchablePicker
      name={name}
      items={items}
      setItems={setItems}
      formPlaceholder={"Selecione o vínculo institucional"}
      searchPlaceholder={"Busca..."}
    />
  );
}


function MaterialCommunityIconsCustom({
  name,
  color = colors.primary,
  size = 25,
}) {
  return (
    <View justifyContent={"center"} height={48}>
      <MaterialCommunityIcons name={name} size={size} color={color} />
    </View>
  );
}
export default function RegisterScreen(props) {
  const authContext = useContext(AuthContext);
  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);
    }
  };

  const automaticLogin = async (form) => {
    const result = await login(form.number, form.password); 

    if (!result.ok) return;
    
    authStorage.setToken(result.data);
    const user = await userPersonalData();
    user.ok && authContext.setUser(user.data);

  }

  const handleSubmit = async (form) => {
    const formDate = date.format("DD/MM/yyyy") === moment().format("DD/MM/yyyy") ? "" : date;

    const result = await signup({...form, dateofborn: formDate})
    console.log(result)

    switch (result.status) {
      case 200:
        automaticLogin(form)
        break;
      case 422:
        // setError()
      
      default:
        
    }
  };

  return (
    <Screen style={styles.containter}>
      <Form
        initialValues={{
          name: "",
          number: "",
          password: "",
          confirmPassword: "",
          institutionName: "",
          gender: "",
          state: "",
          city: "",
          institution: "",
          secQuestion: "",
          secQuestionAns: "",
          role: "",
          consent: false,
        }}
        onSubmit={(form) => {
          comparePassword(form.password, form.confirmPassword);
          handleSubmit(form)
        }}
        validationSchema={validationSchema}
      >
        <View
          style={{ flexDirection: "column", justifyContent: "center", flex: 1 }}
        >
          <KeyboardAwareScrollView scrollEnabled={true}>
            <Text
              style={{
                color: colors.primary,
                fontSize: 20,
                fontWeight: "bold",
                alignSelf: "center",
                marginVertical: 24,
              }}
            >
              Cadastro do usuário
            </Text>
            <Text style={styles.labelStyle}>Apelido de usuário*</Text>
            <View style={styles.iconField}>
              <MaterialCommunityIconsCustom name="account" />
              <FormField
                paddingRight={2}
                flex={1}
                maxLength={40}
                name="name"
                numberOfLines={2}
                placeholder="Digite o apelido de usuário"
              />
            </View>
            <Text style={styles.labelStyle}>Número do telefone:*</Text>
            <View style={styles.iconField}>
              <MaterialCommunityIconsCustom name="phone" />
              <FormField
                flex={1}
                maxLength={12}
                name="number"
                numberOfLines={2}
                placeholder="Digite o número de telefone celular"
                paddingRight={2}
              />
            </View>
            <Text style={styles.labelStyle}>Senha:*</Text>
            <View style={styles.iconField}>
              <MaterialCommunityIconsCustom name="lock" />
              <FormField
                flex={1}
                maxLength={12}
                name="password"
                secureTextEntry={true}
                numberOfLines={2}
                placeholder="Digite a senha"
                paddingRight={2}
              />
            </View>
            <Text style={styles.labelStyle}>Confirmar senha:*</Text>
            <View style={styles.iconField}>
              <MaterialCommunityIconsCustom name="lock" />
              <FormField
                flex={1}
                maxLength={12}
                name="confirmPassword"
                secureTextEntry={true}
                numberOfLines={2}
                placeholder="Repita 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}>
              <MaterialCommunityIconsCustom name="calendar-today" />
              <LocalDatePicker
                date={date}
                setDate={setDate}
                _moment={_moment}
              />
            </View>
            <Text style={styles.labelStyle}>Gênero:</Text>
            <View style={[styles.iconField]}>
              <MaterialCommunityIconsCustom name="account" />
              <GenderPicker name="gender" />
            </View>

            <Text style={styles.labelStyle}>Estado*:</Text>
            <View style={[styles.iconField]}>
              <MaterialCommunityIconsCustom name="map-marker" />
              <StatePicker name="state" />
            </View>

            <Text style={styles.labelStyle}>Cidade*:</Text>
            <View style={[styles.iconField]}>
              <MaterialCommunityIconsCustom name="map-marker" />
              <CityPicker name={"city"} />
            </View>

            <Text style={styles.labelStyle}>Tipo de instituição:</Text>
            <View style={[styles.iconField]}>
              <MaterialCommunityIconsCustom name="bank" />
              <InstitutionPicker name="institution" />
            </View>

            <Text style={styles.labelStyle}>Nome da instituição</Text>
            <View style={styles.iconField}>
              <MaterialCommunityIconsCustom name="bank" />
              <FormField
                flex={1}
                maxLength={12}
                name="institutionName"
                numberOfLines={2}
                placeholder="Digite o nome da instituição"
                paddingRight={2}
              />
            </View>


            <Text style={styles.labelStyle}>Vínculo institucional:</Text>
            <View style={[styles.iconField]}>
              <MaterialCommunityIconsCustom name="bank" />
              <RolePicker name="role"/>
            </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 à pergunta"
                paddingRight={2}
                paddingLeft={2}
              />
            </View>

            <Text style={styles.labelStyle}>Termos de uso*</Text>
            <View
              flexDirection="column"
              alignItems={"flex-start"}
              marginBottom={24}
              marginTop={12}
            >
              <Checkbox
                name={"consent"}
                navigate={() => props.navigation.navigate("UserAgreement")}
              />
            </View>

            <SubmitButton
              flex={1}
              title="cadastrar"
              backgroundColor={colors.primary}
            />
            <TouchableNativeFeedback
              onPress={() => {
                props.navigation.goBack();
              }}
            >
              <View
                style={{
                  flexDirection: "row",
                  alignSelf: "center",
                  paddingBottom: 34,
                  marginTop: 6,
                }}
              >
                <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,
  },
  iconField: {
    width: "100%",
    flex: 1,
    flexDirection: "row",
    marginTop: 12,
    marginBottom: 24,
  },
  dateInput: {
    paddingLeft: 16,
  },
});