import { Formik } from "formik";
import React from "react";
import { useTranslation } from "react-i18next";
import { Image, StyleSheet, Text, View } from "react-native";
import { Button, TextInput, Title } from "react-native-paper";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import Logo from "../../assets/logo192.png";
import { emailSignInStart } from "../../redux/user/user.actions";
import {
  selectCurrentUser,
  selectSigningIn,
} from "../../redux/user/user.selectors";
import SignInErrorAlertComponent from "../sign-in-error-alert/sign-in-error-alert.component";
import Constants from "expo-constants";
import * as Updates from "expo-updates";

const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
  signingIn: selectSigningIn,
});

const mapDispatchToProps = (dispatch) => ({
  emailSignInStart: (email, password) =>
    dispatch(emailSignInStart({ email, password })),
});

export function SignIn({ emailSignInStart, signingIn }) {
  const { t } = useTranslation();

  const formSubmit = (values) => {
    const { email, password } = values;
    emailSignInStart(email, password);
  };

  return (
    <View style={localStyles.content}>
      <View
        style={{
          display: "flex",
          marginTop: 80,
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "space-evenly",
        }}
      >
        <Image style={localStyles.logo} source={Logo} />
        <Title>{t("app.title")}</Title>
      </View>

      <View style={{ flex: 1 }}>
        <Formik
          initialValues={{ email: "", password: "" }}
          onSubmit={formSubmit}
        >
          {({ handleChange, handleBlur, handleSubmit, values }) => (
            <View>
              <TextInput
                label={t("signin.fields.email")}
                mode="outlined"
                autoCapitalize="none"
                keyboardType="email-address"
                onChangeText={handleChange("email")}
                onBlur={handleBlur("email")}
                value={values.email}
                style={[localStyles.input]}
              />

              <TextInput
                label={t("signin.fields.password")}
                mode="outlined"
                secureTextEntry={true}
                onChangeText={handleChange("password")}
                onBlur={handleBlur("password")}
                value={values.password}
                style={[localStyles.input]}
              />

              <SignInErrorAlertComponent />
              <Button
                mode="outlined"
                loading={signingIn}
                onPress={handleSubmit}
              >
                <Text>{t("signin.actions.signin")}</Text>
              </Button>
            </View>
          )}
        </Formik>
      </View>
      <Text style={{ padding: 10, alignSelf: "center" }}>
        {t("settings.labels.version", {
          number: Constants.expoConfig.version,
        })}
      </Text>
    </View>
  );
}

const localStyles = StyleSheet.create({
  content: {
    display: "flex",
    flex: 1,
  },
  logo: { width: 100, height: 100 },
  input: {
    margin: 12,
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(SignIn);