import Constants from "expo-constants";
import { Image } from "expo-image";
import { Formik } from "formik";
import React from "react";
import { useTranslation } from "react-i18next";
import { StyleSheet, View } from "react-native";
import { Button, Text, TextInput } from "react-native-paper";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { emailSignInStart } from "../../redux/user/user.actions";
import {
  selectCurrentUser,
  selectSigningIn,
} from "../../redux/user/user.selectors";
import SignInError from "./sign-in-error";
//import SignInErrorAlertComponent from "../sign-in-error-alert/sign-in-error-alert.component";

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 styles={styles.container}>
      <View style={styles.imageContainer}>
        <Image
          style={styles.logo}
          contentFit="contain"
          source={
            Constants?.expoConfig?.extra?.appVariant === "ROME"
              ? require("@/assets/images/RomeOnlineIcon.png")
              : require("@/assets/images/logo192.png")
          }
        />
        <Text variant="headlineLarge">
          {Constants?.expoConfig?.extra?.appVariant === "ROME"
            ? t("app.title_rome")
            : t("app.title")}
        </Text>
      </View>

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

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

            <SignInError />
            <Button
              loading={signingIn}
              mode="outlined"
              onPress={handleSubmit}
            >
              {t("signin.actions.signin")}
            </Button>
          </View>
        )}
      </Formik>

      <Text style={styles.footer}>
        {t("settings.labels.version", {
          number: Constants.expoConfig?.version,
        })}
      </Text>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    display: "flex",
  },
  imageContainer: {
    display: "flex",
    marginTop: 80,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    gap: 10,
  },
  logo: { width: "100", height: "100" },
  formContainer: {
    display: "flex",
    width: "100%",
    padding: 20,
    gap: 10,
  },
  //   content: {
  //     display: "flex",
  //     flex: 1,
  //   },
  //   logo: { width: 100, height: 100 },
  inputContainer: {
    marginBottom: 20,
    display: "flex",
  },
  input: {},
  footer: {
    padding: 10,
    alignSelf: "center",
  },
});

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