import { Formik } from "formik";
import {
  Button,
  Container,
  Content,
  H1,
  Input,
  Item,
  Label,
  Text,
} from "native-base";
import React from "react";
import { useTranslation } from "react-i18next";
import { ActivityIndicator, Image, StyleSheet, View } from "react-native";
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 styles from "../styles";

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 (
    <Container>
      <Content
        scrollEnabled={false}
        padder
        contentContainerStyle={styles.contentContainer__centered}
        style={localStyles.content}
      >
        <View style={styles.evenlySpacedRow}>
          <Image style={localStyles.logo} source={Logo} />
          <H1>{t("app.title")}</H1>
        </View>
        <Formik
          initialValues={{ email: "", password: "" }}
          onSubmit={formSubmit}
        >
          {({ handleChange, handleBlur, handleSubmit, values }) => (
            <View>
              <Item>
                <Label>{t("signin.fields.email")}</Label>
                <Input
                  autoCapitalize="none"
                  keyboardType="email-address"
                  onChangeText={handleChange("email")}
                  onBlur={handleBlur("email")}
                  value={values.email}
                />
              </Item>
              <Item>
                <Label>{t("signin.fields.password")}</Label>
                <Input
                  secureTextEntry={true}
                  onChangeText={handleChange("password")}
                  onBlur={handleBlur("password")}
                  value={values.password}
                />
              </Item>
              <SignInErrorAlertComponent />
              <Button full onPress={handleSubmit}>
                <Text>{t("signin.actions.signin")}</Text>
                {signingIn ? <ActivityIndicator size="large" /> : null}
              </Button>
            </View>
          )}
        </Formik>
      </Content>
    </Container>
  );
}

const localStyles = StyleSheet.create({
  content: {
    paddingBottom: 200,
  },
  logo: { width: 100, height: 100 },
});

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