import React, { useState, useContext } from "react";
import { StyleSheet, View, Text } from "react-native";
import * as Yup from "yup";
import {
  Form,
  SubmitButton,
  FormField,
  ErrorMessage,
} from "../components/forms";
import Screen from "../components/Screen";
import colors from "../config/colors";
import { dimensions } from "../config/dimensions";

import jwdDecode from "jwt-decode";
import { AuthContext } from "../auth/context";
import authStorage from "../auth/storage";
import assets from "../config/assets";
import Button from "../components/Button";
import { TouchableNativeFeedback } from "react-native-gesture-handler";
//import authApi from '../api/auth';
import login from "../api/auth";

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

const validationSchema = Yup.object().shape({
  name: 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"),
});

function DashedOrSeparator() {
  return (
    <View
      style={{
        flexDirection: "row",
        marginVertical: 20,
        alignItems: "center",
        paddingHorizontal: 14,
      }}
    >
      <View
        style={{
          flex: 1,
          height: 1,
          backgroundColor: colors.subText,
        }}
      ></View>

      <Text
        style={{
          marginHorizontal: 10,
          fontSize: 14,
          fontWeight: "bold",
          color: colors.subText,
        }}
      >
        OU
      </Text>

      <View
        style={{
          height: 1,
          flex: 1,
          backgroundColor: colors.subText,
        }}
      ></View>
    </View>
  );
}

export default function LoginScreen(props) {
  const authContext = useContext(AuthContext);

  const handleSubmit = async (name, password, setLoginFailed) => {
    const result = login(name, password);//await authApi.login(name, password);
    console.log(JSON.stringify(result));
    if (!result.ok) return setLoginFailed(true);

    setLoginFailed(false);
    const user = jwdDecode(result.data);
    authContext.setUser(user);
    console.log(user);
    authStorage.setToken(result.data);
  };

  const [loginFailed, setLoginFailed] = useState(false);
  return (
    <Screen style={[styles.containter, { backgroundColor: colors.grayBG }]}>
      <Form
        initialValues={{
          name: "",
          password: "",
        }}
        validationSchema={validationSchema}
        onSubmit={({ name, password }) =>
          handleSubmit(name, password, setLoginFailed)
        }
      >
        <View paddingHorizontal={14}>
          <assets.AppLogoTitle
            preserveAspectRatio="xMidYMid meet"
            width={300}
            height={30}
            alignSelf="center"
            marginBottom={dimensions.spacing.big_padding}
          />

          <ErrorMessage
            error="Email ou senha inválidos"
            visible={loginFailed}
          />

          <View style={{ paddingVertical: 24 }}>
            <FormField
              maxLength={12}
              name="name"
              keyboardType="numeric"
              numberOfLines={2}
              placeholder="Número de telefone celular"
            />
          </View>

          <View style={{ paddingBottom: 24 }}>
            <FormField
              maxLength={12}
              name="password"
              secureTextEntry={true}
              numberOfLines={2}
              placeholder="Senha"
            />
          </View>

          <SubmitButton title="entrar" backgroundColor={colors.primary} />

          <TouchableNativeFeedback
            onPress={() => {
              props.navigation.navigate("ForgotPassword");
            }}
          >
            <View flexDirection="row" alignSelf="center">
              <Text style={{ color: colors.lightBlue, fontWeight: "bold" }}>
                Esqueceu a senha?
              </Text>
            </View>
          </TouchableNativeFeedback>

          <DashedOrSeparator />

          <Button
            title="cadastrar-se"
            color={colors.green}
            style={{ paddingHorizontal: 16 }}
            onPress={() => {
              props.navigation.navigate("Register");
            }}
          />
        </View>
      </Form>
    </Screen>
  );
}

const styles = StyleSheet.create({
  containter: {
    justifyContent: "center",
  },
});