import { Formik } from "formik";
import {
  Input,
  Header,
  Item,
  Label,
  Form,
  Button,
  Text,
  Container,
  Content,
} from "native-base";
import React from "react";
import { useTranslation } from "react-i18next";
import { SafeAreaView, TextInput, View } from "react-native";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { emailSignInStart, signOutStart } from "../../redux/user/user.actions";
import { selectCurrentUser } from "../../redux/user/user.selectors";
import { StyleSheet } from "react-native";

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

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

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

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

  return (
    <Container>
      <Content
        padder
        contentContainerStyle={styles.contentContainer}
        style={styles.content}
      >
        <Formik
          initialValues={{ email: "", password: "" }}
          onSubmit={formSubmit}
        >
          {({ handleChange, handleBlur, handleSubmit, values }) => (
            <View>
              <Form>
                <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>

                <Button full onPress={handleSubmit}>
                  <Text>{t("signin.actions.signin")}</Text>
                </Button>
              </Form>
            </View>
          )}
        </Formik>
      </Content>
    </Container>
  );
}

const styles = StyleSheet.create({
  contentContainer: {
    justifyContent: "center",
    flex: 1,
  },
  content: {
    paddingBottom: 150,
    // flex: 1,
    // backgroundColor: "#fff",
    // alignItems: "center",
    //justifyContent: "space-between",
    // //justifyContent: "center",
  },
});

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